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

Question

Let's assume we have a two components (Parent and Child), basically I am sending my Parents state variable to my child's input element to do some manipulation. Something like...

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

And my child component looks like this..

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

Basically I want to do 3 things

1. My Child component's childName value should be set initially to that of parent's prop(this.props.name which is Parent's state variable name )
2. On change of my Child 's input, the target text should override my Parent's name(this.props.name)
3. If my child input is empty and my Parent 's name is changing, I want my Child 's component state variable childName to be that of the changing prop coming from the parent(this.props.name)

Can anybody please help me with this?

PS : My Child 's components target text shouldn't update my Parent 's state variable(name) I mean, no Callbacks as props.

Answer 1

I think you should only set the state to your this.props.name when getting the initial state value, and not on each componentWillReceiveProps sample. Once the child sets it's own state, the value will only change in the child and not in the parent

 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>