Javascript 更新React中对象元素的状态

我正在做一个react项目，我在数组中有一个对象，我已经将初始状态设置为

input: [
{item:'', label :'', codeBlock:''}
  ],

在onClick事件中，我设置javaSript对象中元素值的状态，并使用下面的代码将它们推送到输入数组中

Text(){

 const input = this.state.input;
 const item = <input type="text" placeholder="Enter text here!" 
className="InputDiv" onChange={this.handleTextChange.bind(this)}/>
 const codeBlock = <input type="text" placeholder="Enter text here!" 
 className="InputDiv"/>;
const label = this.state.label;
this.setState({input : input.concat({item, label, codeBlock})});
console.log(this.state.input)




}

Text（）{
常量输入=this.state.input；
常数项=
常量代码块=；
常量标签=this.state.label；
this.setState（{input:input.concat（{item，label，codeBlock}）}）；
console.log（this.state.input）
}

现在，我正在尝试更新onChange事件handleTextChange上label元素的值。我的意思是，对于当前状态，在onChange事件上，只设置标签的值并更新状态

请问我将如何反应

---

谢谢

如果状态对象是数组，则必须从索引中选择正确的对象，创建一个重复的对象，并指定新值，然后使用新值设置状态

updateLabel=(text, index)=>{
 let allInputs = [...this.state.input];
 let selectedInput = {...allInputs[index]};
 selectedInput.label = text;
 allInputs[index] = selectedInput;
 this.setState({input:allInputs});
}

---

如果状态对象是数组，则必须从索引中选择正确的对象，创建一个重复对象并指定新值，然后使用新值设置状态

updateLabel=(text, index)=>{
 let allInputs = [...this.state.input];
 let selectedInput = {...allInputs[index]};
 selectedInput.label = text;
 allInputs[index] = selectedInput;
 this.setState({input:allInputs});
}

---

来，试试这个

类TodoApp扩展了React.Component{
状态={
输入：[]，
当前项：“”，
当前标签：“”，
urrentCodeBlock:'
}
handleInput=（e，标签）=>{
//填写输入的当前状态
this.setState（{[label]：e.target.value}）
}
clickHandler=（）=>{
//创建旧输入数组的副本
const newArr=[…this.state.input]；
//创建您定义的新对象
常数newObj={
项目：this.state.currentItem，
标签：this.state.currentLabel，
代码块：this.state.currentCodeBlock，
}
//将新对象推送到旧阵列的副本
新推力（新推力）；
//正在更新状态并将输入值设置为“”
这是我的国家({
输入：newArr，
当前项：“”，
当前标签：“”，
currentCodeBlock:'
})
}
render（）{
让InputList=this.state.input.map（（输入，索引）=>(
{input.item}-{input.label}-{input.codeBlock}
))
返回(
this.handleInput（e，'currentItem'）}/>
this.handleInput（e，'currentLabel'）}/>
this.handleInput（e，'currentCodeBlock'）}/>
拯救


{InputList}

)
}
}
ReactDOM.render（，document.querySelector（#app））

---

在这里试试这样的方法

类TodoApp扩展了React.Component{
状态={
输入：[]，
当前项：“”，
当前标签：“”，
urrentCodeBlock:'
}
handleInput=（e，标签）=>{
//填写输入的当前状态
this.setState（{[label]：e.target.value}）
}
clickHandler=（）=>{
//创建旧输入数组的副本
const newArr=[…this.state.input]；
//创建您定义的新对象
常数newObj={
项目：this.state.currentItem，
标签：this.state.currentLabel，
代码块：this.state.currentCodeBlock，
}
//将新对象推送到旧阵列的副本
新推力（新推力）；
//正在更新状态并将输入值设置为“”
这是我的国家({
输入：newArr，
当前项：“”，
当前标签：“”，
currentCodeBlock:'
})
}
render（）{
让InputList=this.state.input.map（（输入，索引）=>(
{input.item}-{input.label}-{input.codeBlock}
))
返回(
this.handleInput（e，'currentItem'）}/>
this.handleInput（e，'currentLabel'）}/>
this.handleInput（e，'currentCodeBlock'）}/>
拯救


{InputList}

)
}
}
ReactDOM.render（，document.querySelector（#app））

如果不查看您的代码，我们将无法帮助您。您需要有一种方法来识别要更新的

标签

（因为您有一个数组），大概您的代码中确实有这样的标签。请使用演示问题的工具更新您的问题，最好是使用堆栈片段（

[]

工具栏按钮）运行的工具。堆栈代码段支持React，包括JSX。问题是，您有一个对象作为状态的数组，我们不知道要更新数组中的哪个元素。因此，如果我理解您的文本，我会在onClick event=onClick={（）=>this.setState（{input[0].label:'your value'}）上执行此操作。使用数组使此操作复杂化的原因是什么？如果不查看您的代码，我们将无法帮助您。您需要有一种方法来识别要更新的

标签

（因为您有一个数组），大概您的代码中确实有这样的标签。请使用演示问题的工具更新您的问题，最好是使用堆栈片段（

[]

工具栏按钮）运行的工具。堆栈代码段支持React，包括JSX。问题是，您有一个对象作为状态的数组，我们不知道要更新数组中的哪个元素。因此，如果我理解了您的文本，我会在onClick event=onClick={（）=>this.setState（{input[0].label:'your value'}）上执行此操作。将此操作与数组复杂化的原因是什么？