使用道具从孩子触发父函数

Question

我正在尝试做一些简单的事情：我希望子组件触发在父组件中找到的函数，并且我知道正确的方法是使用道具。

在下面的Codepen中，您可以找到一个示例：

https://codepen.io/akmur/pen/MvXGEG

基本上，我要实现的是在控制台上打印“嘿”。

这是我的代码：

class Form extends React.Component {
  constructor(props){
    super(props);
  }

  onClickAdd(){
    this.props.addItem();
  }

  render(){
    return(
      <div>
        <button onClick={this.onClickAdd}>Add</button>
      </div>
    )
  }
}

class App extends React.Component {
  constructor(props){
    super(props);
  }

  addItem(){
    console.log('hey');
  }

  render() {
    return (
      <div>
        <Form addItem={this.addItem} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

谢谢你的帮助！

Answer 1

您不需要onClickAdd函数。 只需直接将您传入的onClick调用this.props.addItem （注意，没有括号）即可。

 class Form extends React.Component {
  constructor(props){
    super(props);
  }

  render(){
    return(
      <div>
        <button onClick={this.props.addItem}>Add</button>
      </div>
    )
  }
}

class App extends React.Component {
  constructor(props){
    super(props);
  }

  addItem(){
    console.log('hey');
  }

  render() {
    return (
      <div>
        <Form addItem={this.addItem} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));