React-List?词典状态或者我错过了什么

Question

让我们从我遇到的问题开始，告诉你们我想要实现的目标。

首先，我得到这个错误

Warning: A component is changing a controlled input of type text to be uncontrolled. 
Input elements should not switch from controlled to uncontrolled (or vice versa).
Decide between using a controlled or uncontrolled input element for the lifetime of the component.

我的目标是先将数据保存到状态。或者我应该使用列表或字典？这就是我被卡住的地方。我也会在这里发布我的代码，让你检查我做错了什么，或者我应该做什么不同。

import React from 'react'
import './TableData.css'

class TableData extends React.Component{
constructor(props){
super(props)
this.state = {
rows:[{service: '',
quantity: '',
price: '',
sum: ''}]
}
this.handleChange = this.handleChange.bind(this)
this.handleAddRow = this.handleAddRow.bind(this)
this.handleRemoveRow = this.handleRemoveRow.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange = idx => event => {
var rows = [...this.state.rows]
rows[idx] = {
[event.target.name]: event.target.value
}
this.setState({
rows
})
var data = this.state.rows
console.log("Log me", data)
}
handleAddRow = () => {
var item = {
service: '',
quantity: '',
price: '',
sum: ''
}
this.setState({
rows: [...this.state.rows, item]
})
}
handleRemoveRow = () => {
this.setState({
rows: this.state.rows.slice(0, -1)
})
}
handleSubmit = (event) => {
event.preventDefault()
var tableData = this.state.rows
console.log("Final data is:", tableData)
}
render() {
return (
<div className="tablePos container" >
<form onSubmit={this.handleSubmit}>
<div className="row">
<table id="tab_logic">
<thead className="tableBackground">
<tr>
<th className="col-md-auto"> Service </th>
<th className="col col-lg-2"> Quantity </th>
<th className="col col-lg-2"> Price </th>
<th className="col col-lg-2"> Sum </th>
</tr>
</thead>
<tbody>
{this.state.rows.map((item, idx) => (
<tr key={idx}>
<td>
<input className="form-control" type="text" name="service" placeholder="Ex: Cloud Service" value={this.state.rows[idx].service} onChange={this.handleChange(idx)}/>
</td>
<td>
<input className="form-control" type="text" name="quantity" placeholder="Ex: 2 Month" value={this.state.rows[idx].quantity} onChange={this.handleChange(idx)}/>
</td>
<td>
<input className="form-control" type="text" name="price" placeholder="Ex: 75.00" value={this.state.rows[idx].price} onChange={this.handleChange(idx)}/>
</td>
<td>
<input className="form-control" type="text" name="sum" placeholder="Ex: 150.00" value={this.state.rows[idx].sum} onChange={this.handleChange(idx)} />
</td>
</tr>
))}
</tbody>
</table>
</div>
<button>Send Data!</button>
</form>
<button onClick={this.handleAddRow} className="btn btn-success">Add Row</button>
<button onClick={this.handleRemoveRow} className="btn btn-danger">Delete Last Row</button>
</div>
);
}
}
export default TableData

因此，基本上它创建了4个输入框，然后你可以写入，如果你完成了，点击发送数据，它会将其保存到状态或添加新行，然后它会添加新行供你输入数据。我从代码中得到的是以下内容。

数据的控制台日志图片

当我点击发送数据时，它只保存最后一个输入字段的数据，而不是全部。

很抱歉我的解释很混乱，但我希望你能理解我的问题，并感谢你的回复！

Answer 1

同时分配onChange内部的值。您正在根据需要展开阵列。但你也必须把物体展开。。否则，它只会将上次更改的输入字段值分配给对象。

rows[idx] = {
...this.state.rows[idx],
[event.target.name]: event.target.value
};

你可以在下面找到我的代码。https://codesandbox.io/s/small-dew-wjqqi