Reactjs가 소품에서 주를 바꾸고 있습니까?

Question

내 주 Duck 구성 요소에는 상태가 power: off입니다. power을 on으로 바꾸려면 off 문자열을 클릭하여 내 메인 내에 구성 요소 Lucas으로 묶어서 전환하고 싶습니다.

/**/ 태그에서 나는 소품을 수정하고이어서 power의 상태를 수정하고 싶습니다. 아래 코드는 작동하지 않는다는 것을 이해합니다. 그러나 그것은 정확히 내가 성취하려고 노력하고있는 것의 명확한 아이디어를 줄 수 있기를 바랍니다.

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

당신은 그것의 state,이 경우 power 값을 변경 Lucas의 방법을 만들고, Lucas에 전달해야 JSFiddle https://jsfiddle.net/mfsc3mkx/

Answer 1

에 포함되어 있습니다. 당신의 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 prop :

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