我有一个循环来渲染一堆输入,它是动态的,用户可以添加行和删除行,但是当元素被销毁时输入的值不同步。
正如您在演示中看到的,我删除了“2”,但“3”被删除了,而 2 仍然存在。
最佳答案
这是因为你的deleteRow方法。
deleteRow = () => this.setState({ rowCount: this.state.rowCount - 1 });
此方法仅更改 state.rowCount 值,并且当调用 render 方法时,您将渲染从 0 到 rowCount 的行。
return <div>{times(rowCount, this.renderRow)}</div>;
因此,您实际上是删除了最后一行,而不是您单击的行。
编辑:您可以通过一些更改获得预期的行为(在状态中创建行数组,更新deleteRow和addRow方法以正常工作,并在输入上添加onChange事件以显示删除的行是预期的行)
import React from "react";
import ReactDOM from "react-dom";
import times from "lodash.times";
export class MultipleInput extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: [{type: "", value: ""}],
};
}
addRow = () => {
this.setState((prevState) => ({
rows: prevState.rows.concat({type: "", value: ""})
}));
};
deleteRow = (i) => {
this.setState((prevState) => ({
rows: prevState.rows.filter((_, index) => index !== i)
}));
};
onChange = (e, i) => {
let rows = this.state.rows.slice();
rows[i].value = e.target.value;
this.setState(
rows: rows,
);
};
renderRow = (i) => {
return (
<div>
<input index={i} type={this.state.rows[i].type} value={this.state.rows[i].value} onChange={(e) => this.onChange(e, i)}/>
{i === 0 && <button onClick={() => this.addRow()}>add row</button>}
{i > 0 && <button onClick={() => this.deleteRow(i)}>x</button>}
</div>
);
};
render() {
return <div>{times(this.state.rows.length, this.renderRow)}</div>;
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<MultipleInput />, rootElement);
这段代码当然不是最干净或更高效的代码,但它正在工作并且(我希望)没有反应反模式。
关于javascript - React的输入值不与dom同步,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52423235/