Понимание того, как использовать состояние в небольшом проекте и управлять своим мыслительным процессом

Давайте углубимся в код небольшого проекта, чтобы лучше понять состояние. Ниже у нас есть картинка. У нас есть панель ввода, кнопка с надписью «Нажми меня» и начальное число, равное нулю.

Наша цель для этого приложения состоит в том, что когда вы вводите что-то и нажимаете кнопку «Нажми меня», 0 будет обновляться с количеством букв в слове, которое вы набрали. Для каждого дополнительного слова, которое вы вводите, мы хотим, чтобы количество букв было добавлен к существующему номеру.

Вот пример:

Набираем привет и нажимаем кнопку click me.

Ввод сбрасывается, и число на экране обновляется до длины слова, которое мы ввели. Когда вы вводите другое слово и нажимаете кнопку «Нажми меня»…

Количество букв в вашем новом слове добавляется к существующему числу на экране, и отображаемое число обновляется.

Вот оно! Привет — это слово из пяти букв, поэтому, когда мы нажимаем кнопку «Нажми меня», ноль обновляется до 5 для количества букв в нашем слове. Затем, когда мы вводим другое слово, он добавляет существующий номер к новому номеру. Ниже приведен полный набор кода, давайте разберем его.

import React, { useState } from 'react'
  function ClickMe() {
    const [lettersTyped, setLettersTyped] = useState("")
    const [letterLength, setLetterLength] = useState(0)

  function handleSubmit(e) {
    e.preventDefault()
  }
  function onHandleClick() {
    setLettersTyped("")
    addLetterLengths()
  }
  function addLetterLengths() {
    setLetterLength(letterLength + lettersTyped.length)
  }

return (
  <div>
    <form onSubmit={handleSubmit}>
      <input type="text"
        onChange={(e) => setLettersTyped(e.target.value)}
        value={lettersTyped}>
      </input>
    </form>
    <button onClick={onHandleClick}">
      ClickMe
    </button>
    <p>{letterLength}</p>
  </div>
  )
}
export default ClickMe

Компонент

Здесь у нас есть наш компонент ClickMe. Для начала мы импортируем React с хуком useState. Мы хотим, чтобы наша форма контролировалась, а это означает, что значения хранятся и управляются состоянием. Глядя на наше изображение, обратите внимание на функции и то, что необходимо для того, чтобы каждая из них работала. У нас есть панель ввода, кнопка и отображаемый номер.

Перво-наперво, государство!

Первое, о чем нам нужно подумать, это «что использует состояние?» Панель ввода и число будут меняться каждый раз, когда мы набираем новое слово, поэтому для них потребуется состояние. Итак, первое, что мы делаем, это создаем наше состояние.

const [lettersTyped, setLettersTyped] = useState("")
const [letterLength, setLetterLength] = useState(0)

У нас здесь два отдельных государства. Первое состояние — это буквы, набранные в строку. Наше состояние установлено на пустую строку, поэтому ничего не отображается на панели до тех пор, пока она не будет введена, и ее можно изменить. Наше состояние, letterLength — это наше число, которое по умолчанию установлено на 0 при загрузке страницы. Теперь нам нужно обновить это состояние до того, что мы вводим.

Наши функции для изменения состояния

Следующий фрагмент кода, который мы напишем, — это функция отправки дескриптора. Эта функция принимает событие в качестве параметра (отправку) и предотвращает перезагрузку страницы при отправке ввода.

function handleSubmit(e) {
  e.preventDefault()
}

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

function onHandleClick() {
  setLettersTyped("")
  addLetterLengths()
}
function addLetterLengths() {
  setLetterLength(letterLength + lettersTyped.length)
}

Когда мы нажимаем нашу кнопку и отправляем наше слово, наша первая функция onHandleClick устанавливает состояние нашего ввода обратно в пустую строку, чтобы слово в нашей панели ввода не осталось после того, как мы его отправили.

После этого наша функция вызывает вторую функцию (addLetterLengths), когда слово отправляется, что приводит нас к нашей следующей функции, addLetterLength. Эта функция установит состояние letterLength в текущее количество отображаемых букв плюс количество букв, введенных из нашего слова. Длина точки в нашем текущем состоянии LetterLength превратит нашу «строку», введенную в строку ввода, в число. Проще говоря, SetLetterLength устанавливает состояние наших отображаемых чисел на текущие отображаемые числа плюс новое количество букв из нашего нового слова.

Форма

Давайте перейдем к нашей контролируемой форме, которая делает все это возможным. Наш компонент возвращает эту форму, которая отображается на экране.

return (
  <div>
    <form onSubmit={handleSubmit}>
      <input type="text"
        onChange={(e) => setLettersTyped(e.target.value)}
        value={lettersTyped}>
      </input>
    </form>
    <button onClick={onHandleClick}">
      ClickMe
    </button>
    <p>{letterLength}</p>
  </div>
  )
}
export default ClickMe

Внутри нашего перенастроенного div у нас есть форма, которая содержит наш ввод, кнопку и длину буквы, отображаемую в теге ‹p›. Сама форма содержит прослушиватель событий onSubmit, который принимает функцию handleSubmit в качестве обратного вызова для предотвращения обновления страницы.

Внутри формы ввод содержит событие onChange, которое прослушивает изменения того, что мы печатаем. Он принимает событие и устанавливает наше состояние letterTyped в значение того, что мы печатаем. Под этим мы устанавливаем наше значение ввода в текущее состояние того, что мы набрали, и теперь форма находится под контролем.

Внутри нашей кнопки у нас есть прослушиватель событий onClick, который принимает функцию onHandleClick в качестве обратного вызова. Поэтому, когда нажимается кнопка «Нажми меня», она запускает функцию onHandleClick выше, которая устанавливает наше состояние на длину введенного слова плюс существующее число и сбрасывает ввод на пустой ввод.

Наш тег ‹p› под кнопкой будет отображать текущее состояние letterLength, которое отображает количество букв.

Заключение

При создании приложения, каким бы большим оно ни было, лучше всего построить проект в уме или на доске и выяснить, на что влияет состояние. Подумайте о том, что нужно сделать и как это сделать, прежде чем писать код, чтобы упростить процесс. Когда я впервые начал писать этот код, я не обращал внимания на то, какое нужно состояние или макет того, как мой код должен быть написан. После рассмотрения уже написанного кода я ясно увидел простой процесс написания приложения и планирую использовать этот навык в будущем.