使用道具從孩子觸發父函數

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'));