Question

我对以下代码有疑问

export class MultipleInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rowCount: 1
    };
  }
  addRow = () => this.setState({ rowCount: this.state.rowCount + 1 });
  deleteRow = () => this.setState({ rowCount: this.state.rowCount - 1 });
  renderRow = i => {
    const { type, value } = this.props;
    const { rowCount } = this.state;
    return (
      <div>
        <input type={type} value={value} />
        <button onClick={this.addRow}>add</button>
        {i > 0 && <button onClick={this.deleteRow}>delete</button>}
      </div>
    );
  };
  render() {
    const { rowCount } = this.state;
    return <div>{times(rowCount, this.renderRow)}
      <br /><br />
      problems
      <p>when there is more input, says i enter something in the input, fill something, then click remove, the value is filled in other value</p>
    </div>
  }
}

要重现，请单击添加，在第二个输入中填写一些值，然后在第二行中单击删除，输入值就在其中。

演示https://codesandbox.io/s/4x0x17zykx

Answer 1

import React from "react";
import ReactDOM from "react-dom";

export class MultipleInput extends React.Component {
  state = {
    rowCount: 1
  };
  addRow = () => {
    this.setState(({ rowCount }) => ({
      rowCount: rowCount + 1,
    }));
  };
  deleteRow = () => {
    this.setState(({ rowCount }) => ({
      rowCount: rowCount - 1,
    }));
  };

  renderRow = i => {
    const { type, value } = this.props;
    const { rowCount } = this.state;
    return (
      <div>
        <input type={type} value={value} />
        <button onClick={this.addRow}>add</button>
        {rowCount > 1 && <button onClick={this.deleteRow}>delete</button>}
      </div>
    );
 };
 render() {
    const { rowCount } = this.state;
    return Array(rowCount).fill(1).map(i => this.renderRow(i));
 }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<MultipleInput />, rootElement);

注意事项

您需要像上面那样增加/减少状态，在以前的状态上添加以更新当前状态； </ p>

在渲染中，我创建了一个新数组，其编号为rowCount。元素，以映射到renderRow方法上。您不需要lodash。

当此组件中有多个输入字段时，现在还将显示删除按钮。即{rowCount > 1 && <button onClick={this.deleteRow}>delete</button>}

Answer 2

单击删除时，您将数组大小减小1，无论您单击哪个删除按钮，它都会始终删除最后一行，因为删除了数组的最后一个元素。您需要为每行指定一个唯一的ID，然后从数组中删除具有该ID的元素，而不是最后一个元素。通过以下方式使用地图功能

Array.map((i,idx)=>{this.renderRow(i, idx)})

现在，您每次调用renderRow函数时都会有一个唯一的递增数字，因此该数字可用作id。将此ID传递到renderRow函数的输入字段中

<input type={type} value={value} id={idx} />

您可以维护这些ID的数组，而不是行数，因此，如果您有1行，则所有数组都是第一个ID [0]，对于2行[0,1]，依此类推

现在，当您单击删除时，传递ID，然后从DOM中删除该特定ID

deleteRow= (idx) => {
     var elem = document.getElementById(idx);
     if (elem.parentNode) {
         elem.parentNode.removeChild(elem);
     }
 this.setState({//Here you can reduce the row count
                        });
        }

移除后仍然保留动态行输入值的反应

2 个答案: