我在表中有一个简单的react组件,可以在表中动态添加行和删除行,但是当我在输入中更改或键入文本时出现错误:( 运行我的应用程序时,出现以下警告: 组件正在更改要控制的文本类型的不受控制的输入。输入元素不应切换........
也在react工具中,当我输入第一个单元格的状态时,状态将行显示为可以的数组,然后想要输入第二个单元格的第一个消失的:(
class App extends Component {
state = {
rows: [{}]
}
handleChange = idx => e => {
const { name, value } = e.target;
const rows = [...this.state.rows];
rows[idx] = {
[name]: value
};
this.setState({
rows
});
};
handleAddRow = () => {
const item = {
columnName: "",
dataType: "",
values: ""
};
this.setState({
rows: [...this.state.rows, item]
});
};
handleRemoveRow = () => {
this.setState({
rows: this.state.rows.slice(0, -1)
});
};
handleRemoveSpecificRow = (idx) => () => {
const rows = [...this.state.rows]
rows.splice(idx, 1)
this.setState({ rows })
}
<thead>
<tr>
<th className="text-center"> # </th>
<th className="text-center"> Column Name </th>
<th className="text-center"> DataType </th>
<th className="text-center"> Values </th>
<th />
</tr>
</thead>
<tbody>
{this.state.rows.map((item, idx) => (
<tr id="addr0" key={idx}>
<td>{idx}</td>
<td>
<input
type="text"
name="columnName"
value={this.state.rows[idx].columnName}
onChange={this.handleChange(idx)}
className="form-control"
/>
</td>
<td>
<input
type="text"
name="dataType"
value={this.state.rows[idx].dataType}
onChange={this.handleChange(idx)}
className="form-control"
/>
</td>
<td>
<input
type="text"
name="values"
value={this.state.rows[idx].values}
onChange={this.handleChange(idx)}
className="form-control"
/>
</td>
<td>
<button
className="btn btn-outline-danger btn-sm"
onClick={this.handleRemoveSpecificRow(idx)}
>
Sil
</button>
</td>
</tr>
))}
</tbody>