Question

所以说你有一个子组件，它返回许多输入字段并且需要数据对象作为道具。

Filter

父组件可能类似于：

class InputFields extends React.Component {

  render() {

    let data = this.props.data

    return (
      <div className='input-group'>
      <input type='text' defaultValue={data.name} onChange={this.props.update} />
      <input type='text' defaultValue={data.age} onChange={this.props.update} />
      <input type='text' defaultValue={data.email} onChange={this.props.update}/>
      </div>
    )
  }
}

在class App extends React.Component { constructor(props) { super(props) this.state = { items: getItemsFromSomewhere() } } update(event) { /* Somehow update main state here? */ } render() { /* imagine this as an array of objects, each with name, age, email ,etc. */ var items = this.state.items.map(item => { return <InputFields data={item} update={this.update.bind(this)} /> }) return <div className='itemLists'> {items} </div> } }内我想为传递下来的this.props.update对象设置相应的状态。但是data函数只接收合成事件，该事件仅提供对DOM元素本身的引用。

找到需要更新哪个州字段的最佳方法是什么，例如，当onChange的输入字段发生变化时，如何将其传播到主要父级中的状态？

我知道可以使用data.name，但我怎么知道哪个refs可以抓住更改事件？我只需要遍历所有这些吗？

Answer 1

你可以这样做：

class InputFields extends React.Component {

  _onChange(field) {
    this.props.update(field, this.props.data);
  }

  render() {

    let data = this.props.data

    return (
      <div className='input-group'>
      <input type='text' defaultValue={data.name} onChange={this._onChange.bind(this, 'name')} />
      <input type='text' defaultValue={data.age} onChange={this._onChange.bind(this, 'age')} />
      <input type='text' defaultValue={data.email} onChange={this._onChange.bind(this, 'email')}/>
      </div>
    )
  }
}

然后在父组件的update函数中，您将更改的字段作为字符串加上整个数据对象：

update(field, item) {
    // do stuff
    var value = item[field];
}

Answer 2

编辑：你说得对，我回答得太快了。 以下是一个全新的答案，我认为这符合您的需求。

为什么不使用event.target.value？你只是使用一个事件处理程序？

在孩子身上：

<input type='text' id="name" defaultValue={data.name} onChange={this.props.update("name")} />`

更新功能：

update(stateToChange) {
   var self = this;
   return function(e) {
       var newState = {};
       newState[stateToChange] = e.target.value;
       self.setState(newState);
   }
}

希望这次有所帮助：）

将状态更改从onChange事件传递到父级

2 个答案: