Question

假设我们有两个组件（Parent和Child），基本上我将我的Parents状态变量发送到我孩子的输入元素以进行一些操作。有点像...

 var Parent = React.createClass({
  getInitialState: function() {
    return {
      name: ''
    }
  },
  handleTextChange: function(e) {
    this.setState({
      name: e.target.value
    })
  },
  render: function() {
    return(
      <div>
      <input type="text" placeholder="Enter something" onChange={this.handleTextChange} />
      <Child name={this.state.name} />
      </div>
    )
  }
});

我的孩子组件看起来像这样..

var Child = React.createClass({
  getInitialState: function() {
    return {
      childName: ''
    }
  },
  componentWillReceiveProps: function(nextProps) {
    this.setState({
      childName: nextProps.name
    })
  },
  handleChildTextChange: function(e) {
    this.setState({
      childName: e.target.value
    })
  },
  render: function() {
    return(
      <div>
        <input type="text" onChange={this.handleChildTextChange} placeholder={this.props.name} />
        <h4>{this.state.childName}</h4>
      </div>
    )
  }
});

基本上我想做3件事

我的子组件的childName值应该最初设置为该值 parent的prop（this.props.name是Parent的状态变量） name）
在更改我的Child输入时，目标文本应覆盖我的父母的名字（this.props.name）
如果我的孩子输入为空并且Parent的名字正在改变，我希望我的Child组件状态变量childName成为。{ 来自父母的变化道具（this.props.name）

有人可以帮帮我吗？

P.S：我的Child组件目标文本不应更新我的Parent状态变量（名称）我的意思是，没有回调作为道具。

Answer 1

我认为你应该只在获取初始状态值时将状态设置为this.props.name，而不是在每个componentWillReceiveProps样本上。一旦孩子设置了自己的状态，该值将仅在孩子中而不在父母

中发生变化

var Child = React.createClass({
  getInitialState: function() {
    return {
      childName: this.props.name,
      owned: false
    }
  },
  componentWillReceiveProps: function(nextProps) {
    // only do it if the state isn't owned by the child
    if (!this.state.owned) {
      this.setState({
        childName: nextProps.name,
        owned: false
      });
    }
  },
  handleChildTextChange: function(e) {
    this.setState({
      childName: e.target.value,
      owned: true
    });
  },
  render: function() {
    return(
      <div>
        <input type="text" onChange={this.handleChildTextChange} placeholder={this.props.name} />
        <h4>{this.state.childName}</h4>
      </div>
    )
  }
});

var Parent = React.createClass({
  getInitialState: function() {
    return {
      name: ''
    }
  },
  handleTextChange: function(e) {
    this.setState({
      name: e.target.value
    })
  },
  render: function() {
    return(
      <div>
      <input type="text" placeholder="Enter something" onChange={this.handleTextChange} />
      <Child name={this.state.name} />
      </div>
    )
  }
});

ReactDOM.render(<Parent />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
</div>

将更改的prop值设置为子状态变量

1 个答案: