将更改道具值设置为子状态变量

Question

假设我们有两个组件（父组件和子组件），基本上我要将父组件的状态变量发送到子组件的输入元素以执行一些操作。就像...

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

基本上我想做三件事

null

有人能帮我做这个吗？

附：我的子的组件目标文本不应该更新我的父的状态变量（名称）我的意思是，没有回调作为道具。

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>