reactjs - 在 React 中从子组件调用父组件中定义的事件处理程序

Question

在我的 redux/react 应用程序中，我有一个父组件 SourceList ，其中包含 SourceItem 类型的子项。我决定(不确定这是否真的适用于 React/Redux)让子控件忽略单击处理程序是什么，并将单击事件处理程序从父级传递给子级。

我对 redux/react 还很陌生，代码如下

componentDidMount() {
  const { actions } = this.props;
  if(this.props.side === 'right') { return; }
  actions.fetchSources(); // this works perfectly
}

handleChildClick(source) {
  const { actions } = this.props;
  if(this.props.side === 'right') { 
    actions.changeRight(source); 
    return; 
  }
  actions.changeLeft(source);
}

render() {
  const { actions } = this.props.actions;
  var that = this;
  var rightSide = this.props.side === 'right';
  var sources = this.props.sources.items.map(function(source) {
    return <SourceItem 
              key={source.id} 
              onClick={that.handleChildClick.bind(that, source)}
              source={source}/>;
    });
  return <ul>{sources}</ul>
}

actions 通过 bindActionCreators 绑定(bind)到操作创建者

子组件只是从 props 获取值:

class SourceItem extends React.Component {
  render() {
    const { onClick, selected, source } = this.props;
    return <li onClick={onClick}>{source.name}</li>
  }
}

虽然这有效，但我不想在 that 中保留对 this 的引用并像 中那样调用 bind 函数that.handleChildClick.bind(that, source) 是正确的 redux/react 方式。

感谢您的帮助!

Answer 1

一个好的方法是在构造函数中定义handleChildClick，这是为了防止每次通过onClick调用该函数时都重新创建该函数。要同时解决 this => that 的问题，请使用箭头函数。

constructor([props]) {
  this.handleChildClick = this.handleChildClick.bind(this)
} 

....
render() {
  const { actions } = this.props.actions;
  var rightSide = this.props.side === 'right';
  var sources = this.props.sources.items.map((source) => {
    return <SourceItem 
          key={source.id} 
          onClick={this.handleChildClick}
          source={source}/>;
    });
  return <ul>{sources}</ul>

}

.....

class SourceItem extends React.Component {
  render() {
    const { onClick, selected, source } = this.props;
    return <li onClick={onClick(source)}>{source.name}</li>
  }
}