Как реализовать привязку данных для сложной формы Реагирование

Question

Мне нужна помощь в создании приложения для приложения с поддержкой приложения React.

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

Некоторые значения зависят от других значений в структуре (например, максимальное значение поля указано в другом поле). Данные имеют вложенные структуры, но они не сопоставляют 1: 1 моим компонентам (я не контролирую вход), что делает обработку более сложной (глубокие компоненты могут изменять значения поверхности).

Для целей примера:

data.json

{ 
    "age": 12, 
    "maxAge": 100, 
    "name": { 
    "first": "John", 
    "last": "Doe" 
    }, 
    "dogName": "Foo" 
} 

---

main.jsx

ReactDOM.render(<Editor data={data} />, mount); 

---

Editor.jsx

<form> 
    <Person data={props.data} /> 
    <Text defaultValue={props.data.dogName} /> 
    <h2>Settings:</h2> 
    <Number defaultValue={props.data.maxAge} /> 
</form> 

---

Person.jsx

<fieldset> 
    <Text defaultValue={props.data.name.first} /> 
    <Text defaultValue={props.data.name.last} /> 
    <Number max={props.data.maxAge} defaultValue={props.data.age} /> 
</fieldset> 

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

Каковы альтернативы?

Answer 1

Для официального руководства: Thinking in React

Я считаю, что выше руководство может помочь вам пройти через некоторые из проблем, с которыми вы сталкиваетесь.

Для вашего первого пункта: я бы использовал состояние для хранения информации. Вы можете выполнить привязку «двухсторонних» данных, чтобы форма представляла ваши данные, и данные представляют вашу форму. Вы также можете использовать некоторую форму вызовов функции onChange для обновления данных, которые зависят от других входов.

Раздел 5 связанного руководства проходит через распространение данных по цепочке (т.е. человек -> редактор) с использованием обратных вызовов.

Если это будет потенциально развиваться в более крупный проект, я бы предложил посмотреть на Flux для внешнего интерфейса типа MVC с React как View.