[英]How do I handle onChange of objects inside an array (React State)?
community,社区,
I'm trying to build a table where its rows are rendered based on an array of objects:我正在尝试构建一个表,其中的行是基于对象数组呈现的:
this.state = {
tableContent: [
{
id: this.state.tableContent.length,
firstname:"",
lastname:""
},
...
]
Each row displays one object.每行显示一个对象。 (2 columns in this case, n rows) Each cell is also an input field, so users can manipulate the table:
(本例中为 2 列,n 行)每个单元格也是一个输入字段,因此用户可以操作表格:
<tbody>
{this.state.tableContent.map((row) => {
return(
<tr key={row.id}>
<td><input value={row.firstname} onChange={this.handleFirstNameChange}> </input></td>
...
</tr>
)
})}
</tbody>
I want each cell / input field to display the change when the user changes the input value and as such the state.我希望每个单元格/输入字段在用户更改输入值和状态时显示更改。 Because I'm prepopulating the input field with
value={row.firstname}
I need to define an onChange
handler function that changes the state/value of the target object's firstname
property.因为我使用
value={row.firstname}
预先填充输入字段, value={row.firstname}
我需要定义一个onChange
处理函数来更改目标对象的firstname
属性的状态/值。
So how does my onChange
handler function look like?那么我的
onChange
处理程序函数是什么样子的呢? I tried using spreads, but to no avail so far...我尝试使用点差,但到目前为止无济于事......
Some thoughts: Using the standard procedure doesn't work because I have a nested state (Array of objects):一些想法:使用标准程序不起作用,因为我有一个嵌套状态(对象数组):
handleChange = (event) => { this.setState({ firstname: event.target.value }) }
Trying to use the spread operator results in some weird mess as well: (this code here is somewhat wrong: maybe you can fix it?)尝试使用扩展运算符也会导致一些奇怪的混乱:(这里的代码有些错误:也许您可以修复它?)
handleFirstNameChange = (event) => {
const {tableContent} = {...this.state};
const currentState = tableContent;
const { firstname, value } = event.target;
currentState[0] = value;
this.setState({ tableContent: currentState});
}
I appreciate any help!我感谢任何帮助!
edit: The code below seems to nearly work.编辑:下面的代码似乎几乎可以工作。 (thanks @Nikhil ) However now, whenever the user types into the input field, every letter they type will replace the existing letter / value of 'row.firstname'.
(感谢@Nikhil)但是现在,每当用户在输入字段中键入内容时,他们键入的每个字母都将替换“row.firstname”的现有字母/值。 Also, state doesn't refresh automatically so only the last-typed letter would show up / persist.
此外,状态不会自动刷新,因此只有最后输入的字母会显示/保留。 What I need the input field to have is a functionality just like any casual input field.
我需要输入字段具有的功能就像任何临时输入字段一样。 event.persist();
event.persist(); seems to be needed to keep the event value.
似乎需要保持事件值。
handleFirstNameChange = (id, event) => {
event.persist();
this.setState(prevState => {
tableContent : prevState.tableContent.forEach((row) => {
if(row.id === id) { row.firstname = event.target.value}
})
})
}
input looks like this:输入看起来像这样:
onChange={(event) => this.handleWNRChange(row.id,event)}
I think something like this would work.我认为这样的事情会奏效。
const handleFirstNameChange = (id, event) => {
event.preventDefault();
const {tableContext} = this.state;
const myRowIndex = tableContext.findIndex((row) => row.id === id);
tableContext[myRowIndex].firstname = event.target.value;
this.setState({ tableContext });
}
This should be all you need.这应该就是你所需要的。 Just assign this method to the
onChange
of the input
element.只需将此方法分配给
input
元素的onChange
。 Like so:像这样:
onChange={(event) => this.handleFirstNameChange(row.id, event)}
May be this will help可能这会有所帮助
{this.state.tableContent.map((row, index) => {
return(
<tr key={row.firstname}>
<td><input value={row.firstname}
onChange={(event)=>this.handleFirstNameChange(event, index)> </input></td>
</tr>
)
})
}
handleFirstNameChange(event, index){
this.setState((prevState => {
tableContent : prevState.tableContent.forEach((row,i)=>{
if(index === i) row.firstname = event.target.value
})
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.