Reactjsのコンポーネントのイベントハンドラ

Question

これはコンポーネントでは発生しませんが、イベントハンドラをdivにアタッチすると機能します。子コンポーネントに小道具タイプ関数を渡す必要がありますか？あなたは基本的にやった

const buttonStyle = { 
    color: 'red' 
}; 

class Button extends React.Component { 
    render() { 
     return (
      <a className="social-button twitter"> 
      <i href="#" className="fa fa-twitter"></i> 
      </a> 
     )}; 
} 

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

    handleClick() { 
    console.log('this is:'); 
    } 

    render() { 
     return (
      <div> 
      <div onClick={(e) => this.handleClick(e)}> {/*this works attaching it to a div*/} 
      CLick me 
      </div> 
      <div className="social-buttons"> 
       <Button onClick={(e) => this.handleClick(e)} />{/*does now work attaching it to a component*/} 
      </div> 
      </div> 
     ) 
    } 
} 

ReactDOM.render(<PanelButtons />, document.querySelector('body')); 

Answer 1

、ButtonコンポーネントにonClickと呼ばれるコールバックを渡しています。コンポーネントの小道具からアクセスできるようになります。

class Button extends React.Component { 
    render() { 
     return (
      <a className="social-button twitter" onClick={this.props.onClick}> 
      <i href="#" className="fa fa-twitter"></i> 
      </a> 
     )}; 
} 

Buttonコンポーネントのa要素がクリックされると、あなたが渡されたコールバックがトリガされます（と​​が呼び出されます）。

Answer 2

<button />のonClickは期待通りに機能していました。

しかし、これはあなたが作成した<Button />コンポーネントである、onClickはあなたがそのhandleClickあなたPanelButtonsコンポーネントに実際のonClickをコールバックします以下のようなボタンコンポーネントのaタグ、上onClickを通じて呼び出すことができます小道具として送信されます。

const buttonStyle = { 
    color: 'red' 
}; 

class Button extends React.Component { 

    handleClick = (e) => { 
     this.props.onClick(e) 
    } 

    render() { 
     return (
      <a className="social-button twitter" onClick={this.handleClick}> 
      <i href="#" className="fa fa-twitter"></i> 
      </a> 
     )}; 
} 

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

    handleClick() { 
    console.log('this is:'); 
    } 

    render() { 
     return (
      <div> 
      <div onClick={(e) => this.handleClick(e)}> {/*this works attaching it to a div*/} 
      CLick me 
      </div> 
      <div className="social-buttons"> 
       <Button onClick={(e) => this.handleClick(e)} />{/*does now work attaching it to a component*/} 
      </div> 
      </div> 
     ) 
    } 
} 

ReactDOM.render(<PanelButtons />, document.querySelector('body')); 

あなただけのただdivタグにイベントリスナーを追加することで、このような少しをレンダリング変更、ボタンごとにPanelButtonsでonClickを追加したい場合。

render() { 
    return (
     <div> 
     <div onClick={(e) => this.handleClick(e)}> {/*this works attaching it to a div*/} 
     CLick me 
     </div> 
     <div className="social-buttons" onClick={(e) => this.handleClick(e)}> 
      <Button />{/*does now work attaching it to a component*/} 
     </div> 
     </div> 
    ) 
} 

Answer 3

あなたは<Button />コンポーネントに小道具を伝承すべき

class Button extends React.Component { 
    render() { 
     return (
      <a className="social-button twitter" {...this.props}> 
      <i href="#" className="fa fa-twitter"></i> 
      </a> 
     )}; 
} 

もっと読み：JSX spread attributes