дублирование сгруппированного состояния и привязка к событию onChange

Question

Как сделать так, чтобы динамическая строка (добавление и удаление строки) и входное связывание (событие bind onChange) работали?*

this.state = {
  rowCount: 1,
  rows: [{
    id: 1,
    structure: [
      {
        type: 'input',
        value
      },
      {
        type: 'textarea',
        value: 
      }
    ]
  }]
}

render() {
    return(
      <div>{this.state.rows.map(o => <div>
        {o.structure.map(s => {
          let block = ''
          if(s.type === 'input') {
            block = <div><input /></div>
          }else if(s.type === 'textarea') {
            block = <div><textarea /></div>
          }
          return block
        })}
        <button onClick={this.addBlock}>Add block</button>
      </div>)}</div>
    )
  }

https://codesandbox.io/s/nr88plwqj4

Answer 1

Вот пример добавления новой строки и удаления последней строки без изменения структуры объекта строк начального состояния:

https://codesandbox.io/s/vm4lqnjyz7

Несколько моментов, заслуживающих упоминания:

1) не забудьте добавить ключи к элементам при рендеринге списка, вот объяснение, почему: https://reactjs.org/docs/lists-and-keys.html#keys

2) Свойство состояния «rowCount» представляется избыточным, так как оно равнодлина массива строк

3) кнопка «добавить строку», вероятно, должна располагаться вне метода карты, если вы собираетесь просто добавить новую строку в существующий массив (вместо создания независимого дерева входных блоковвнутри каждой коробки).

Answer 2

Я изменил ваш код, чтобы мы могли добавлять блоки (для удаления используйте аналогичный подход), предполагая, что все блоки будут иметь одинаковую структуру.Кроме того, я разделил ваш «рендер» на несколько «рендеров», которые отображают различные части программы, чтобы было легче читать.

https://codesandbox.io/s/xjzlzqj04z

Идея заключается в следующем: каждый разВы нажимаете кнопку Добавить блок, вы проверяете все строки, делая копию в переменную "newRows".Finnaly, я делаю толчок к newRows с новыми данными, которые мы хотим добавить, в этом случае и добавляя подходящий идентификатор.

В частности, в случае этой структуры я настоятельно рекомендую, чтобы каждая строка была отдельнойреагировать компонент, больше, если структура одинакова для каждой строки (текст + ввод).Если вы делаете это с дополнительным компонентом реакции, вы можете управлять блоком добавления или удаления с состоянием, представляющим собой простой массив идентификаторов, вместо добавления всей структуры, и всей логикой (onchange value, delete) можно управлятьвнутри другого компонента.Если вы хотите получить доступ к значению всех компонентов в базовом компоненте, вы можете добавить в качестве реквизита «updateValue», которое получит идентификатор и обновит состояние.Я постараюсь сделать пример и обновить его позже

edit: здесь у меня есть пример со строками, добавленными в качестве другого компонента.Это сильно упрощает логику состояния, но это также зависит от ваших потребностей.

https://codesandbox.io/s/4xq4w37v1w

Я должен сказать, что codesandbox немного глючит с реакцией, поэтому, если он не работает, я рекомендую«выбрать все -> вырезать -> вставить»