Question

我正在创建一个表单，我想在其中添加表单行并随时编辑任何行/单元格。通过添加新行，它似乎可以正常工作，但是如果我编辑上一行/单元格，则表单字段会混乱。

这是我对每个字段的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上的表格

Answer 1

您以错误的顺序传递了其中一个输入的参数。应该将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)}
/>

无法在React中获取我的表单以正常工作

1 个答案: