Btnコンポーネントと親のReact-onClickハンドラ

Question

Btnコンポーネントがあり、そのコンポーネント内のonClickにいくつかのスタイルトグルがあります。

ボタンをクリックしたときに機能を実行するために、親にonClickを追加します。 btnコンポーネントは再利用されるので、親コンポーネントのonClickは変更されますが、BtnコンポーネントのonClickは常にbtnスタイルを切り替えるだけです。

FIDDLE

class BtnParent extends React.Component { 
constructor(props) { 
    super(props); 
    this.alsoDoThis = this.alsoDoThis.bind(this); 
    } 
    alsoDoThis() { 
    alert('clicked'); 
    } 
    render() { 
    return (
     <BtnFav onClick={this.alsoDoThis} /> 
    ); 
    } 
}; 

Answer 1

あなたが子供にonClick小道具を渡すが、あなたはit.The機能を明示的に起動する必要が使用することはありません：

handleClick() { 
    this.props.onClick(); // invoke it anywhere in the child 
    this.setState({favorited: !this.state.favorited}); 
} 

Answer 2

btnParent.jsx以下：

class BtnParent extends React.Component { 
constructor(props) { 
    super(props); 
    this.alsoDoThis = this.alsoDoThis.bind(this); 
    } 
    alsoDoThis() { 
    alert('clicked'); 
    } 
    render() { 
    return (
     <BtnFav alsoDoThis={this.alsoDoThis} /> 
    ); 
    } 
}; 

btnFav.jsx下記：

class BtnFav extends React.Component { 
    render() { 
    return (
     <button onClick={this.props.alsoDoThis} /> 
    ); 
    } 
}; 

解決できます。親と子の間

---

コンポーネントの通信は、あなたがfunctionを渡すために小道具を反応させ使用することができますが、2つのコンポーネントは、親/子でない場合、あなたは、いくつかのイベントがlibがパブリッシュ/サブスクライブを使用することができます。そのようなhttps://github.com/hustcc/onfire.js

Answer 3

として、これを試してみ

class BtnFav extends React.Component { 
     render() { 
     return (
      <button onClick={()=>this.props.alsoDoThis()} /> 
     ); 
     } 
    };