javascript - 在反应js中更改不受控制的输入
问题描述
我有一个简单的表格反应组件,我在表格中动态添加行和删除行,但是当我在输入中更改或键入文本时出现错误:(当我运行我的应用程序时,我收到以下警告:组件正在更改要控制的文本类型的不受控制的输入。输入元素不应切换.......
同样在反应工具中,状态将行显示为数组,当我输入第一个单元格时,它的更新就可以了,然后想输入第二个单元格第一个消失:(
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>
解决方案
推荐阅读
- python - Pandas - 根据逻辑语句定位值
- c - C语言中的=和|=有什么区别?
- stream - 如何在 Deno 中获取文件校验和?
- regex - 某些字符和规则的正则表达式
- javascript - 我如何将 p5.js 与 nuxt 集成
- apache-kafka - 如何使用自定义值(和自定义 serdes)加入两个 ktable
- reactjs - 反应钩子形式 - 注册字段不起作用
- import - len 函数显示错误的单词长度(没有空格等)是否有原因?
- python - 如何从一组节点中找到一个多边形?
- parsing - 使用 PHP 或 JS 解析扫描的 PDF 文件的最佳方法是什么?