我正在创建一个表单,我想在其中添加表单行并随时编辑任何行/单元格。通过添加新行,它似乎可以正常工作,但是如果我编辑上一行/单元格,则表单字段会混乱。
这是我对每个字段的handleChange:
handleChange = (key, e) => {
const { name, value } = e.target
const currentRow = this.state.formRows.filter(r => r.key === key)[0]
const withoutCurrentRow = this.state.formRows.filter(r => r.key !== key)
const updatedRow = { ...currentRow, [name]: value }
const newRows = [...withoutCurrentRow, updatedRow]
this.setState(({ formRows }) => ({ formRows: newRows }))
}
这是我在codesandbox上的表格
答案 0 :(得分:0)
您以错误的顺序传递了其中一个输入的参数。应该将DetailActivity
作为第一个参数并将key
作为第二个参数。
event
您还可以使用findIndex
获取要更新的对象的索引,并使用更新的字段在数组中创建该对象的新副本。
<Input
value={description}
name="description"
placeholder="description"
style={{ width: '20%', marginRight: 8 }}
onChange={e => this.handleChange(key, e)}
/>
<Input
value={amount}
name="amount"
placeholder="amount"
style={{ width: '20%', marginRight: 8 }}
onChange={e => this.handleChange(key, e)}
/>