Question

我尝试创建一个菜单，其中用户应该创建一个角色详细信息，但我有一个问题是通过孩子的输入来更新选项状态。

var Name = React.createClass({
  render: function(){
    return(
        <input type="text"/>
    )
  }
});

var Options = React.createClass({   
  getInitialState: function(){
    return{
        name: ''
    }
  },
  render: function(){
    return (
        <div>
            Name: <Name onChange={this.updateName} value={this.state.name} />
        </div>
    )
  },
  updateName: function(evt){
    this.setState({
        name: evt.target.value
    });
  }
});

如何使用Name？

的输入更新Option状态

Answer 1

你也需要在Name组件上使用onChange函数，它将值发送到父组件

试试这个：

var Name = React.createClass({
  onUpdate: function(evt) {
      this.props.onChange(evt);
  }

  render: function(){
    return(
        <input type="text" onChange={this.onUpdate} value={this.props.value}/>
    )
  }
});

var Options = React.createClass({   
  getInitialState: function(){
    return{
        name: ''
    }
  },
  render: function(){
    return (
        <div>
            Name: <Name onChange={this.updateName} value={this.state.name} />
        </div>
    )
  },
  updateName: function(evt){
    this.setState({
        name: evt.target.value
    });
  }
});

Answer 2

Component Communication in React

请参阅此链接以了解React组件之间的通信方式。

在React中更新来自子项的状态

2 个答案: