@JonnyBuchanan的答案非常完美，但只适用于数组状态变量。如果状态变量只是一个单一的字典，遵循以下方法:

inputChange = input => e => {
    this.setState({
        item: update(this.state.item, {[input]: {$set: e.target.value}})
    })
}

你可以用字典的字段名替换[input]，用它的值替换e.target.value。这段代码对我的表单的输入更改事件执行更新工作。

发现这令人惊讶地困难，没有一个ES6传播魔法似乎工作如预期。 正在使用这样的结构来获得用于布局目的的渲染元素属性。

在这个简化的例子中，使用immutability-helper中的update方法是最直接的:

constructor(props) {
    super(props)
    this.state = { values: [] }
    this.updateContainerState = this.updateContainerState.bind(this)
  }

updateContainerState(index, value) {
    this.setState((state) => update(state, { values: { [index]: { $set: value } } }))
  }

改编自https://github.com/kolodny/immutability-helper#computed-property-names

要更新的数组成员是一个嵌套更复杂的对象，使用适当的深度复制方法基于复杂性。

当然有更好的方法来处理布局参数，但这是关于如何处理数组。每个子元素的相关值也可以在它们之外计算，但我发现向下传递containerState更方便，因此它们的子元素可以随意获取属性并在给定的索引处更新父状态数组。

import React from 'react'
import update from 'immutability-helper'
import { ContainerElement } from './container.component.style.js'
import ChildComponent from './child-component'
export default class ContainerComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { values: [] }
    this.updateContainerState = this.updateContainerState.bind(this)
  }

  updateContainerState(index, value) {
    this.setState((state) => update(state, { values: { [index]: { $set: value } } }))
  }

  // ...

  render() {
    let index = 0
    return (
      <ContainerElement>
      <ChildComponent
        index={index++}
        containerState={this.state}
        updateContainerState={this.updateContainerState}
      />
      <ChildComponent
        index={index++}
        containerState={this.state}
        updateContainerState={this.updateContainerState}
      />
      </ContainerElement>
    )
  }
}

我将移动函数句柄change并添加一个索引参数

handleChange: function (index) {
    var items = this.state.items;
    items[index].name = 'newName';
    this.setState({items: items});
},

到动态表单组件，并将其作为道具传递给PopulateAtCheckboxes组件。在遍历项目时，可以包含一个额外的计数器(在下面的代码中称为index)，将其传递给句柄更改，如下所示

{ Object.keys(this.state.items).map(function (key, index) {
var item = _this.state.items[key];
var boundHandleChange = _this.handleChange.bind(_this, index);
  return (
    <div>
        <PopulateAtCheckboxes this={this}
            checked={item.populate_at} id={key} 
            handleChange={boundHandleChange}
            populate_at={data.populate_at} />
    </div>
);
}, this)}

最后，您可以调用更改侦听器，如下所示

<input type="radio" name={'populate_at'+this.props.id} value={value} onChange={this.props.handleChange} checked={this.props.checked == value} ref="populate-at"/>

首先获取您想要的项目，更改该对象上的内容并将其设置回状态。 如果你使用键控对象，你只通过在getInitialState中传递一个对象来使用状态的方式会更容易。

handleChange: function (e) {
   item = this.state.items[1];
   item.name = 'newName';
   items[1] = item;

   this.setState({items: items});
}

突变免费的:

// given a state
state = {items: [{name: 'Fred', value: 1}, {name: 'Wilma', value: 2}]}

// This will work without mutation as it clones the modified item in the map:
this.state.items
   .map(item => item.name === 'Fred' ? {...item, ...{value: 3}} : item)

this.setState(newItems)

尝试这肯定会工作，其他情况下我尝试过，但没有工作

import _ from 'lodash';

this.state.var_name  = _.assign(this.state.var_name, {
   obj_prop: 'changed_value',
});