状況が小道から州を変えていますか？

Question

私のメインのDuckコンポーネントには、私には状態power: offがあります。 powerをonに切り替えるには、表示されているoff文字列をクリックしてください。この文字列は、私のメインの中にコンポーネントLucasでラップされています。

/**/タグでは、私が小道具を変更したい場所と、それに続くpowerの状態です。私は以下のコードは動作しないと理解しています。しかし、私が達成しようとしていることを明確にしてくれることを願っています。あなたは、そのstate、この場合はpower値を変更し、Lucasにそれを渡すためにLucasでメソッドを作成する必要がJSFiddle https://jsfiddle.net/mfsc3mkx/

Answer 1

に含ま

var Lucas = React.createClass({ 

/* 
controller:function(){ 
    this.setProps({power: 'on'}); 
}, 
*/ 

render: function(){ 
    return (<div><p onClick={this.controller}>{this.props.power}</p></div>); 
    } 
}); 

var Duck = React.createClass({ 
    getInitialState:function(){ 
    return {power: 'off'} 
}, 

render:function(){ 
    return (<div> 
    <Lucas power={this.state.power}/> 
    </div>); 
    } 
}); 

。あなたのLucasコンポーネントでこの

var Lucas = React.createClass({ 
    render: function(){ 
     return (<div><p onClick={this.props.turnOn}>{this.props.power}</p></div>); 
     } 
}); 

var Duck = React.createClass({ 
    getInitialState:function(){ 
     return {power: 'off'} 
    }, 
    turnOn: function(){ 
     this.setState({power : 'on'}) 
    }, 
    render:function(){ 
     return (<div> 
      <Lucas power={this.state.power} turnOn={this.turnOn}/> 
      </div>); 
    } 
}) 

jsfiddle

Answer 2

よう

何かが、あなたはonClick小道具を設定する必要があります。

var Lucas = React.createClass({ 
    handleClick: function() { 
    this.props.onClick(this.props.power); 
    }, 
    render: function(){ 
    return (
     <div><p onClick={this.handleClick.bind(this)}>{this.props.power}</p></div> 
    ); 
    } 
}); 

次に、あなたのDuckコンポーネントでは、あなたはonLucasClickコールバックを定義する必要がありますそれをLucasonClickに提供してください：

var Duck = React.createClass({ 
    getInitialState:function() { 
    return { 
     power: 'off' 
    }; 
    }, 

    handleLucasClick(power) { 
    this.setState({ 
     power: power === 'on' ? 'off' : 'on' 
    }); 
    } 

    render:function() { 
    return (
     <div> 
     <Lucas power={this.state.power} onClick={this.handleLucasClick.bind(this)} /> 
     </div> 
    ); 
    } 
});