在做一些工厂的项目是往往需要表格，而且参数和数据量都是非常大的。和后端需要交互的地方也非常的多，需要传给后端的参数也就非常的多，那么怎么才能把表格的数据全部传给后端就是一个很大的问题，在这里我纠结了很长时间，后来是别人提点我才完成的这个难点，现在我在这里记录一下，给自己提一个醒。下面是我写的代码。 这是HTML的部分
{
this.state.ListData.map((item, index) => {
let str=="0.00"
let strFour==="0.0000"
return (
<tr key={index} className="table-th-tr">
<td>{index + 1}</td>
<td style={{ width: 100 }}>
<Input
value={item.name}
onChange={this.infoKuang("name", index).bind(this)}
>
</Input>
</td>
<td>
<Input
value={item.tFe === str || item.tFe === 0 ? null : item.tFe}
onChange={this.infoKuang("tFe", index).bind(this)}
>
</Input>
</td>
<td><Input
value={item.siO2 == str || item.siO2 === 0 ? null : item.siO2}
onChange={this.infoKuang("siO2", index).bind(this)}
></Input></td>
<td><Input
value={item.caO === str || item.caO === 0 ? null : item.caO}
onChange={this.infoKuang("caO", index).bind(this)}
></Input></td>
<td><Input
value={item.mgO === str || item.mgO === 0 ? null : item.mgO}
onChange={this.infoKuang("mgO", index).bind(this)}
></Input></td>
<td><Input
value={item.al2O3 === str || item.al2O3 === 0 ? null : item.al2O3}
onChange={this.infoKuang("al2O3", index).bind(this)}
></Input></td>
<td><Input
value={item.loI === str || item.loI === 0 ? null : item.loI}
onChange={this.infoKuang("loI", index).bind(this)}
></Input></td>
<td><Input
value={item.feO === str || item.feO === 0 ? null : item.feO}
onChange={this.infoKuang("feO", index).bind(this)}
></Input></td>
<td><Input
value={item.k2O === strFour || item.k2O === 0 ? null : item.k2O}
onChange={this.infoKuang("k2O", index).bind(this)}
></Input></td>
<td><Input
value={item.na2O === strFour || item.na2O === 0 ? null : item.na2O}
onChange={this.infoKuang("na2O", index).bind(this)}
></Input></td>
<td><Input
value={item.znO === strFour || item.znO === 0 ? null : item.znO}
onChange={this.infoKuang("znO", index).bind(this)}
></Input></td>
<td><Input
value={item.s === strFour || item.s === 0 ? null : item.s}
onChange={this.infoKuang("s", index).bind(this)}
></Input></td>
<td><Input
value={item.p === strFour || item.p === 0 ? null : item.p}
onChange={this.infoKuang("p", index).bind(this)}
></Input></td>
<td><Input
value={item.tiO2 === strFour || item.tiO2 === 0 ? null : item.tiO2}
onChange={this.infoKuang("tiO2", index).bind(this)}
></Input></td>
<td><Input
value={item.price === str || item.price === 0 ? null : item.price}
onChange={this.infoKuang("price", index).bind(this)}
></Input></td>
<td><Input
value={item.ratio === 0 || item.ratio === str ? null : item.ratio}
onChange={this.infoKuang("ratio", index).bind(this)}
></Input></td>
</tr>
)
})
}
给每个input加上一个onChange时间用index区分你填写的是哪一行，这样就会得到一个数组，下面是js的部分。
infoKuang(name, index) {
return (e) => {
const value = e.target.value;
const newData = this.state.ListData.slice();
newData[index][name] = value;
this.setState({ ListData: newData })
//console.log(this.state.ListData) listdata是我在state里面写一个数组，
//他的格式和表格的一样。因为在没有最近信息的时候，数据就会从最近的信息里
//面调取。在console里面就可看到你在表格里面输入的内容这样就可以把这些数据传给后端了。
}
}
