Javascript 反应+；Redux：从类声明之外的const内部调度操作
我有一个组件EditableTable，我正在绑定键盘响应。当它们到达行或列的末尾时，如果用户按下向右键或向下键，我想创建另一行/列。我遇到的问题是，我无法从我在类声明之外创建的函数内部分派操作Javascript 反应+；Redux：从类声明之外的const内部调度操作,javascript,reactjs,redux,Javascript,Reactjs,Redux,我有一个组件EditableTable，我正在绑定键盘响应。当它们到达行或列的末尾时，如果用户按下向右键或向下键，我想创建另一行/列。我遇到的问题是，我无法从我在类声明之外创建的函数内部分派操作 editable.js const bindKeyboard = (event) => { switch(event.key) { case 'ArrowUp': onUpPress(event); break; case 'ArrowDown': onDownPress(event)
editable.jsconst bindKeyboard = (event) => {
switch(event.key) {
case 'ArrowUp': onUpPress(event);
break;
case 'ArrowDown': onDownPress(event);
break;
case 'ArrowLeft': onLeftPress(event);
break;
case 'ArrowRight': onRightPress(event);
break;
default: console.log("key pressed "+event.key);
}
}
const onDownPress = (event) => {
let cell = document.getElementById(event.target.id);
let id = cell.id.split(' ');
let nextRowCell = id[0]*1+1;
let column = cell.dataset.column;
if(event.target.name == "tableHeader" && cell != null) {
document.getElementById(1+" "+column).focus();
} else if(document.getElementById(nextRowCell) == null) {
//want to dispatch action here
(event) => this.props.handleAddRow(event.target.id);
} else {
document.getElementById(nextRowCell+" "+column).focus();
}
}
...Some code
class EditableTable extends React.Component {
...
return <input name="tableHeader" data-row={0} data-column={index} id={index} defaultValue={title}
key={index}
onChange={(event) => this.props.handleHeaderChange(event.target.id, event.target.value)}
onKeyDown={(event) => this.props.bindKeyboard(event)}
style={tableStyles.header} />
const bindKeyboard=（事件）=>{
开关（事件键）{
案例“ArrowUp”：onUpPress（事件）；
打破
案例“箭头向下”：onDownPress（事件）；
打破
案例“ArrowLeft”：onLeftPress（事件）；
打破
案例“ArrowRight”：onRightPress（事件）；
打破
默认值：console.log（“按键+事件键”）；
}
}
const onDownPress=（事件）=>{
让单元格=document.getElementById（event.target.id）；
设id=cell.id.split（“”）；
设nextRowCell=id[0]*1+1；
让column=cell.dataset.column；
if（event.target.name==“tableHeader”&&cell！=null）{
document.getElementById（1+“”+列）.focus（）；
}else if（document.getElementById（nextRowCell）==null）{
//想在这里采取行动吗
（event）=>this.props.handleAddRow（event.target.id）；
}否则{
document.getElementById（nextRowCell+“”+column）.focus（）；
}
}
…一些代码
类EditableTable扩展了React.Component{
...
返回此.props.handleHeaderChange（event.target.id，event.target.value）}
onKeyDown={（事件）=>this.props.bindKeyboard（事件）}
style={tableStyles.header}/>
您还可以获取对存储的引用（但这取决于代码的其余部分），然后调用
store.dispatch（yourAction）mapDispatchToProps