javascript - 无法读取 React 容器中自定义 onTouch 函数中未定义的属性 'props'

Question

我正在尝试使用 react material-ui 和最新版本的 react.js(目前为 15.0.0)创建待办事项列表。

在名为 TodoList 的容器中，我试图将 onTouchAction 传递/分配给引用 Todo 的组件 code>onTouchAction，这将切换其完成状态。

在下面的代码中，toggleTodo(todoId) 是一个将数据发送到 reducer 的操作方法，但是，在尝试获取对 dispatch 的引用时出现以下错误 function int he props of the TodoList container，根据控制台中的错误，看起来 this.props 是未定义的。也就是说，我可以打印出 this.props.dispatch 作为生命周期函数中的一个函数，例如 componentDidMount()。

onTouchAction(todoId) {
    console.info('on touch item, todoId: ', todoId);
    let dispatch = this.props.dispatch; // this causes error: Cannot read property 'props' of undefined

    dispatch(toggleTodo(todoId));
   }

控制台错误:

Cannot read property 'props' of undefined

那么，我的问题是为什么 this.props 在我的自定义函数中未定义，但存在于生命周期事件函数中？

Answer 1

当你在 ES6 中使用 React 时，你必须绑定(bind)你的处理程序。

这可以在构造函数中完成:

export default class Component extends React.Component {
  constructor() {
    super();
    this.onClickAction === this.onClickAction.bind(this);
  }

  onClickAction(e) {}
}

或者您可以在所有使用它的地方使用它。

export default class Component extends React.Component {
  onClickAction(e) {}

  render() {
    return <input onClick={this.onClickAction.bind(this)}/>
  }
}

或者你可以使用 ES6 粗箭头:

export default class Component extends React.Component {
  onClickAction = (e) => {}

  render() {
    return <input onClick={this.onClickAction}/>
  }
}