Sobes.tech
Middle

Съставни компоненти + React Context → предаване на formEntity чрез доставчик в Form и използване в FormItem. Form обгръща децата си в FormContext.Provider, а FormItem използва cloneElement за инжектиране на стойност и onChange в Input. Капан: уверете се, че FormItem предава името към обработчика за актуализация. ```javascript const Form = ({ children, formEntity }) => ( <FormContext.Provider value={formEntity}>{children}</FormContext.Provider> ); const FormItem = ({ name, children }) => { const { state, handlers } = useContext(FormContext); return React.cloneElement(children, { value: state[name], onChange: (e) => handlers.updateValues({ name, value: e.target.value }), }); }; ```

sobes.tech AI

Отговор от AI

В данном примере используется паттерн Compound Components с React Context для управления состоянием формы.

  • Компонент Form создаёт контекст FormContext и передаёт в него объект formEntity, содержащий состояние формы и методы обновления.
  • FormItem получает из контекста состояние и обработчики, затем с помощью React.cloneElement инъецирует в дочерний элемент (например, <input>) пропсы value и onChange.

Ключевой момент — передача name в обработчик onChange, чтобы обновлять именно нужное поле формы:

onChange: (e) => handlers.updateValues({ name, value: e.target.value })

Без передачи name обновление состояния формы будет некорректным, так как не будет понятно, какое поле изменилось.

Такой подход позволяет централизованно управлять состоянием формы и упрощает работу с вложенными компонентами формы.