React - это библиотека JavaScript, которая особенно полезна для создания одностраничных приложений. Изучение React требует практики, и для меня в основном я просто пишу код, создающий компоненты и приложения. Затем повторение того, что вы только что сделали, либо с той же проблемой, либо с новой, при запуске это трудно понять, но по мере того, как вы продолжаете это делать, вы получаете это больше и легче становится кодировать. Кроме того, работая с React, вы можете увидеть, насколько он полезен и полезен.

Одна часть работы с React, которая мне сначала показалась сложной, однако, благодаря практике и попыткам использовать ее в различных лабораториях, я хорошо понял, это Controlled Forms. Компонент формы является обычным явлением в повседневных приложениях, которые мы используем, мы используем формы для регистрации пользовательского ввода. Обычно у нас есть формы для регистрации, входа в систему, оставить отзыв, оставить отзыв или для ряда других целей.

В React форму можно превратить в отдельный компонент, в большинстве форм мы будем сохранять состояние полей, заполненных пользователем внутри формы, поэтому мы сделаем компонент формы компонентом класса. Затем в нашем возвращении мы можем поместить JSX формы, у нас будут теги формы с тегами ввода для любого количества полей и кнопка отправки внутри формы.

Затем нам нужно будет поместить значение и onChange во входной тег, также чтобы сделать наш код СУХИМ, если входной тег не имеет имени, мы также могли бы добавить имя. Имя будет равно имени поля и должно быть таким же, как имя поля, установленного в состоянии. Значение равно this.state.nameOfTheField. Наконец, onChange соответствует функции, которая принимает событие (handleChange). Вот пример поля ввода:

<input type="date" name="date" value={this.state.date} onChange={this.handleChange}/>

Хотите прочитать эту историю позже? Сохраните в Журнале.

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

handleChange = e => {
  this.setState({
    [e.target.name]: e.target.value
  })
}

Итак, используя два примера, описанных выше, когда пользователь вводит значение в наш ввод даты, наше состояние обновляется до ввода пользователя.

Затем нам нужно отправить нашу форму и введенные пользователем данные в серверную базу данных, где хранится информация. Для этого нам нужно поместить значение onSubmit в тег формы, который принимает функцию, которая затем будет обрабатывать нажатие пользователя на «Отправить». Наш тег открывающейся формы будет выглядеть примерно так:

<form onSubmit={this.handleSubmit}>

Затем нам нужно определить эту функцию handleSubmit, в нашей функции сначала будет помещен .preventDefault (), чтобы предотвратить обновление страницы. Затем мы отправляли запрос на выборку с методом POST на бэкэнд, чтобы поместить введенную пользователем информацию в бэкэнд. HandleSubmit может выглядеть так:

handleSubmit = e => {
  e.preventDefault()
  fetch("http://localhost/INSERT POST LOCATION", {
    method: 'POST',
    headers:{
      "Content-type": "application/json"
    },
    body: JSON.stringify({
      date: this.state.date,
    }) 
   })
   .then(resp => resp.json())
   .then(data => { })
}

Наконец, возьмите данные, только что отправленные на серверную часть, и отправьте их функции для обновления новой информации на передней панели. Эта часть не проиллюстрирована выше, потому что все зависит от того, чего вы хотите, или от того, хотите ли вы что-нибудь с этим делать во внешнем интерфейсе. После этого вы можете сбросить форму в исходное состояние, вызвав setState и вернув их значения, вероятно, обратно в пустые строки.

📝 Сохраните эту историю в Журнале.

👩‍💻 Просыпайтесь каждое воскресное утро и слушайте самые интересные истории из области технологий, ожидающие вас в вашем почтовом ящике. Прочтите информационный бюллетень« Примечательно в технологиях .