В этой статье я собираюсь создать простую регистрационную форму с помощью Bootstrap, где мы сделаем функциональный компонент, в этом компоненте мы будем использовать React Usestate ()
Крючки, где сделает вложенное состояние в одном объекте и попытаться обновить вложенный объект. Это очень сложно обновить вложенное состояние в реальном проекте. Я надеюсь, что вы знакомы с Basic of rectjs, мы не собираемся базовые настройки Reactjs, мы собираемся прыгать на создание формы регистрации.
Давайте начнем создавать регистрационную форму с помощью bootstraps. в App.js
Файл мы создадим регистрационную форму Просто скопируйте фрагмент HTML-кода.
Теперь давайте начнем создать состояние, в котором пользовательские данные будут доступны в нашем компоненте. App.js.
export default function App() { const [user, setUser] = React.useState({ username: '', email: '', address: { state: '', city: '', geolocation: { lat: '', long: '' } } }); }
Здесь мы создали состояние с помощью вложенного состояния. Теперь добавим атрибуты имени и значения в нашем HTML-коде, а также добавить метод отправки формы Отправить
и событие Onchange Onchange
в поле входных данных HTML.
Onchange
Мероприятия
const onChange = e => { let data = { ...user }; let name = e.target.name; let val = e.target.value; if (name == 'username' || name == 'email') { data = { ...data, [name]: val }; } else if (name == 'state' || name == 'city') { data = { ...data, address: { ...data.address, [name]: val } }; } else if (name == 'lat' || name == 'long') { data = { ...data, address: { ...data.address, geolocation: { ...data.address.geolocation, [name]: val } } }; } setUser(data); };
а также OnSubmit событие представить
const submit = e => { e.preventDefault(); console.log(user); };
Давайте посмотрим весь код вместе. App.js.
import React from 'react'; export default function App() { const [user, setUser] = React.useState({ username: '', email: '', address: { state: '', city: '', geolocation: { lat: '', long: '' } } }); const onChange = e => { let data = { ...user }; let name = e.target.name; let val = e.target.value; if (name == 'username' || name == 'email') { data = { ...data, [name]: val }; } else if (name == 'state' || name == 'city') { data = { ...data, address: { ...data.address, [name]: val } }; } else if (name == 'lat' || name == 'long') { data = { ...data, address: { ...data.address, geolocation: { ...data.address.geolocation, [name]: val } } }; } setUser(data); }; const submit = e => { e.preventDefault(); console.log(JSON.stringify(user)); }; return (); }
Оригинал: “https://dev.to/abu/how-to-update-nested-state-in-react-component-without-using-redux-1k6k”