Блог

Я реализовал динамическое множественное текстовое поле в reactjs,

когда я добавляю новую строку, нажимая add кнопку, вводим ключевое текстовое поле и вводим значение текстового поля, щелчок по значку не добавляет строку.

может помочь, вот codesandbox https://codesandbox.io/s/dreamy-neumann-ov2wj

 handleValueChange = (event, row, i) => {
var newArray = JSON.parse(JSON.stringify([...this.state.additionalFields]));
newArray[row.id].value[i] = event.target.value;
this.setState({ additionalFields: newArray });
};
  

Создание глубокой копии свойства «AdditionalFields» в state object, похоже, устранило проблему.

Одна вещь, которую я обычно делаю при копировании ссылочного значения, содержащего 1 или более слоев других ссылочных значений (объектов, массивов), заключается в том, что я преобразую его в JSON с помощью JSON.stringify() , а затем преобразую его обратно в объект с помощью JSON.parse() . В результате получается массив, который не указывает на ваш исходный массив в вашем объекте состояния. Lodash имеет более читаемый способ с их cloneDeep() методом, но с ванильным JavaScript вы можете использовать мое решение.