react的输入值与dom不同步

Question

I have a loop to render bunch of input, it's dynamic, user can add row and delete row, but the value entered is not sync when a element is destroyed.

as you can see in the demo, I deleted '2' but '3' got deleted and 2 is still there.

Code: https://codesandbox.io/s/4x0x17zykx

Answer 1

It is because of your deleteRow method.

deleteRow = () => this.setState({ rowCount: this.state.rowCount - 1 });

This method just changes state.rowCount value, and when the render method is called, you're rendering rows from 0 to rowCount.

return <div>{times(rowCount, this.renderRow)}</div>;

Thus, you are effectively removing the last row, and not the row you clicked on.

EDIT : You can have the expected behavior with some changes (Creating an array of rows within the state, updating deleteRow and addRow methods to work properly and add an onChange event on the inputs to show that the removed row is the expected one)

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);

This code is certainly not the cleanest or more efficient one, but it is working and (I hope) is free of react anti-pattern.