Middle
Sudėtiniai komponentai + React Context → formEntity perdavimas per teikėją Form ir naudojimas FormItem. Form apgaubia savo vaikus FormContext.Provider, o FormItem naudoja cloneElement, kad įvestų value ir onChange į Input. Spąstai: įsitikinkite, kad FormItem perduoda pavadinimą atnaujinimo tvarkytojui. ```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
Atsakymas iš 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 обновление состояния формы будет некорректным, так как не будет понятно, какое поле изменилось.
Такой подход позволяет централизованно управлять состоянием формы и упрощает работу с вложенными компонентами формы.