javascript - React的输入值不与dom同步

Question

我有一个循环来渲染一堆输入，它是动态的，用户可以添加行和删除行，但是当元素被销毁时输入的值不同步。

正如您在演示中看到的，我删除了“2”，但“3”被删除了，而 2 仍然存在。

代码:https://codesandbox.io/s/4x0x17zykx

Answer 1

这是因为你的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);

这段代码当然不是最干净或更高效的代码，但它正在工作并且(我希望)没有反应反模式。