Reactjs从道具改变状态

Reactjs changing states from props?

本文关键字：改变 状态 Reactjs      更新时间：2023-09-26

在我的主Duck组件中，我有一个状态power: off。我希望能够通过单击可见的off字符串将power切换到on，该字符串封装在我的main中的组件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/

您必须在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

在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 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>
    );
  }
});
相关文章：