реагировать динамическое значение ввода строки осталось после удаления

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>
  }
}

Для воспроизведения нажмите кнопку Добавить, введите некоторые значения во 2-й вход, затем нажмите кнопку удаления для второй строки, значение входного значения там.

Демо https://codesandbox.io/s/4x0x17zykx

Answer 1

Вы уменьшаете размер массива на 1 при нажатии на кнопку удаления, она всегда будет удалять последнюю строку независимо от того, какую кнопку удаления вы щелкнули после удаления последнего элемента массива.Вам нужно дать уникальный идентификатор каждой строке и удалить элемент с этим идентификатором из массива, а не последний элемент.Используйте функцию map следующим образом

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

Теперь у вас есть уникальный инкрементный номер, передаваемый в функцию renderRow каждый раз, когда вы вызываете ее, так что этот номер можно использовать в качестве идентификатора.Передайте этот идентификатор в поле ввода в функции renderRow

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

Вместо числа строк, вы можете сохранить массив этих идентификаторов, поэтому, если у вас есть 1 строка, весь ваш массив имеет первый идентификатор, которыйравно [0], а для 2 строк [0,1] и т. д.

Теперь, когда вы нажимаете удалить, передайте идентификатор и удалите этот конкретный идентификатор из DOM

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

Answer 2

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

На заметку

Вам нужно увеличивать / уменьшать свое состояние, как указано выше, добавить в предыдущее состояние, чтобы обновить текущее состояние;

Inрендер я создал новый массив, который имеет rowCount нет.элементов для отображения по методу renderRow.Для этого вам не нужно lodash.

Также теперь будет отображаться кнопка удаления, когда в этом компоненте имеется более одного поля ввода.т.е. {rowCount > 1 && <button onClick={this.deleteRow}>delete</button>}