Question

我有一个组件EditableTable，我正在绑定键盘响应。当它们到达行或列的末尾时，如果用户按下向右键或向下键，我想创建另一行/列。我遇到的问题是我无法从我在类声明之外创建的函数内部调度我的动作。

EditableTable.js

const 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} />

Answer 1

您可以在组件类中移动事件处理程序吗？

您还可以获得对商店的引用（但这取决于您的其余代码），然后调用store.dispatch(yourAction);

React + Redux：从类声明之外的const内部调度动作

1 个答案: