小道具を使用して子供から親機能をトリガーする

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機能は必要ありません。ちょうどあなたが渡したthis.props.addItemを直接onClick（通知、括弧なし）に電話してください。

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