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

Включенный JSFiddle https://jsfiddle.net/mfsc3mkx/

Answer 1

Вы должны создать метод в Lucas изменить свою state, в этом случае значение power, и передать его в 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

В вашем Lucas компонент, вы должны установить 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> 
    ); 
    } 
});