動的コンポーネントonClickが機能しない

Question

私はJS Fiddleに以下のコードを付けました。

私は動作するダイナミックコンポーネントの設定があります。 var Component = Switchを実行したり、他のReactコンポーネントにComponentを設定すると動作します。しかし、私はそれをクリックすると切り替えることができるようにしたい。

私はonClickイベントを設定しました。しかし、それは発射しない。私は、ログステートメントや変更を取得しません。なぜどんなアイデア？あなたは、実際のHTML要素に、すなわち

var Other = React.createClass({ 
    render: function() { 
    return <h2 onClick={this.props.onClick}>Test this craziness</h2>; 
    } 
}); 

Answer 1

簡単にonClick属性を追加する必要が

var Other = React.createClass({ 
    render: function() { 
    return <h2>Test this craziness</h2>; 
    } 
}); 

var Switch = React.createClass({ 
    render: function() { 
    return <h2>A different one to switch with</h2>; 
    } 
}); 

var Hello = React.createClass({ 
    getInitialState: function() { 
    return {on: true}; 
    }, 
    handleClick: function() { 
    console.log('handleclick'); 
    this.setState({on: ! this.state.on}); 
    }, 
    render: function() { 
    console.log(this.state); 
    var Component = this.state.on ? this.props.component.name : Switch; 
    return <Component onClick={this.handleClick} />; 
    } 
}); 

ReactDOM.render(
    <Hello component={{name: Other}} />, 
    document.getElementById('container') 
); 

Answer 2

！ onClickがComponentに直接置かれている場合は、これはで、はonClick関数として設定されています。代わりにthis.props.onClickに配置されます。実際のDOM要素にonClickを追加する必要があります。添付のJSFiddleを参照してください！