React Form, контролируемый ввод и многое другое
Одна из величайших особенностей React — это то, что он контролирует форму и ввод через хук состояния. Это то, что отличает его от ванильного JavaScript и намного упрощает управление данными, особенно когда приложение становится больше.
Мне нравится тот факт, что вы можете перейти на вкладку / хуки компонентов React в инструменте разработчика Chrome и посмотреть, какие состояния у вас происходят в вашем файле. (Да, это рай ОКР.)
Но в то же время новичку, который никогда не работал ни с одной библиотекой программирования, поначалу может быть сложно уследить за всем.
Одна вещь, которая помогает мне, когда я настраиваю контролируемую форму и ввод в поисковый запрос, это помнить 3 шага:
1) Set state (Don't forget to import the hook!) 2) Add value attribute that eaquals to the user input in the input field 3) Add onChange and use setter function to set state to the input.
После того, как эти шаги выполнены, для форм необходимо добавить прослушиватель событий onSubmit в тег формы для обработки части отправки и для поля ввода для поискового запроса, onChange для обработки части фильтрации, но он всегда начинается с вышеуказанных 3 шагов для установки до контролируемой формы и входов.
На самом деле 3 кажется магическим числом в React.
Например, в жизненном цикле компонента:
Component Life Cycle: 1) MOUNT (first render) 2) UPDATE (re-render) 3) UNMOUNT (parent re-render)
И для передачи реквизита тоже:
1) Identify/ define what to pass down 2) Pass it to a child component as props. 3) Accept it as props in the child component.
Имея в виду, что есть 3 шага, которые нужно выполнить, действительно помогают помнить, что нужно делать при работе с несколькими результатами для приложений.
Первый раз, когда я изучаю React, вначале может потребоваться огромная кривая обучения, но когда я выполнил ту же лабораторную работу, что и с ванильным JavaScript, я определенно оценил React больше, потому что я мог добиться того же результата за половину времени. Удачи в кодировании!
