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 prop：

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回调，并将其提供给Lucas onClick道具：

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

Reactjs从道具改变状态？

2 个答案: