我正在创建一个应用程序，用户可以在其中设计自己的表单。例如，指定字段名称以及应包括哪些其他列的详细信息
该组件在这里作为JSFIDLE提供
我的初始状态如下所示：
var DynamicForm=React.createClass({
getInitialState:函数（）{
变量项={}；
项[1]={name:'field 1'，填充到：'web_start'，
与“客户名称”相同，
自动完成来自：客户名称，标题：'}；
项[2]={name:'field 2'，填充到：'web_end'，
与“用户名”相同，
自动完成来自：用户名，标题：'}；
返回{items}；
},
render:function（）{
var_this=这个；
返回(
<；div>；
{Object.keys（this.state.items）.map（函数（键）{
var item=_this.state.items[key]；
返回(
<；div>；
<；PopulateAckBox this={this}
选中={item.populate_at}id={key}
populate_at={data.populate_at}/>；
<；/div>；
);
}，这个）}
<；button onClick={this.newFieldEntry}>；创建新字段<；/button>；
<；button onClick={this.saveAndContinue}>；保存并继续<；/button>；
<；/div>；
);
}
我想在用户更改任何值时更新状态，但我很难找到正确的对象：
var populateacheckboxs=React.createClass({
handleChange:函数（e）{
item=此.state.items[1]；
item.name='newName'；
项目[1]=项目；
this.setState（{items:items}）；
},
render:function（）{
var populateAtCheckbox=this.props.populate_at.map（函数（值））{
返回(
<；标签for={value}>；
<；input type=“radio”name={'populate_at'+this.props.id}value={value}
onChange={this.handleChange}checked={this.props.checked==value}
ref=“填充位置”/>；
{value}
<；/label>；
);
}，这个）；
返回(
<；div className=“在复选框处填充”>；
{populateacheckbox}
<；/div>；
);
}
});
我应该如何制作this.setState以使其更新项[1]。name
由于此线程中存在大量错误信息，下面介绍如何在没有助手库的情况下执行此任务：
handleChange:函数（e）{
//1.对项目进行粗略复制
让items=[…this.state.items]；
//2.制作一个你想要变异的项目的浅拷贝
let item={…items[1]}；
//3.更换您所处的财产
item.name='newName'；
//4.把它放回我们的数组。注意，我们在这里对数组进行变异，但这就是为什么我们先做了一个副本
项目[1]=项目；
//5.将状态设置为我们的新副本
this.setState（{items}）；
},
如果需要，可以组合步骤2和步骤3：
让项目={
…项目[1]，
名称：“新名称”
}
或者你可以在一行中完成整个过程：
this.setState（（{items}）=>({
项目：[
…项。切片（0,1），
{
…项目[1]，
名称：'新名称'，
},
…项目。切片（2）
]
}));
注意：我制作了items一个数组。OP使用了一个对象。但是，概念是相同的
您可以查看终端/控制台中发生的情况：
❯ 节点
>；items=[{name:'foo'}，{name:'bar'}，{name:'baz'}]
[{name:'foo'}，{name:'bar'}，{name:'baz'}]
>；克隆=[…项]
[{name:'foo'}，{name:'bar'}，{name:'baz'}]
>；item1={…克隆[1]}
{name:'bar'}
>；item1.name='bacon'
“培根”
>；克隆[1]=项1
{name:'bacon'}
&克隆
[{name:'foo'}，{name:'bacon'}，{name:'baz'}]
>；项目
[{name:'foo'}，{name:'bar'}，{name:'baz'}]//很好！我们没有对'items'进行变异`
>；项目===克隆
false//这些是不同的对象
>；项[0]==克隆[0]
true//我们不需要克隆项目0和2，因为我们没有对它们进行变异（效率提高！）
>；项[1]==克隆[1]
错//我们复制的这个家伙