Reactjs 将事件引用传递给回调

Question

在下面的代码中，如何将 onclick 事件传递给回调 'handleClick':

<button id="submit" onClick={this.props.handleClick} >Submit</button>

在回调中执行以下操作，将 e 显示为未定义：

class ParentComponent extends Component{
    handleClick(e){
     //e is undefined
    }
}

Answer 1

您可以使用下面的方法

<button id="submit" onClick={(e)=>this.props.handleClick(e)} >Submit</button>

Answer 2

您的代码会将事件对象传递给 this.props.handleClick，您不需要在此处更改任何内容，除非范围有所不同（这很难说，因为您已将渲染代码排除在外） .

尝试在您的代码中重现此代码段，它应该适合您。注意this绑定。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    console.log(e)
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

body {
    padding: 5px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">
</div>

发生的事情是 onClick 道具期望获得一个带有签名 (e) => {func body} 的函数。这意味着当触发 onClick 事件时，您传递给该道具的任何函数对象都将使用 event 对象作为参数调用。

Reactjs 将事件引用传递给回调

Reactjs pass event reference to callback

callback

event-propagation

reactjs