Реагировать на управляемый компонент

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");
  const [headingText, setHeadingText] = useState("");

  function handleChange(event) {
    // console.log(event.target.value);
    setName(event.target.value);
  }

  function handleClick(event) {
    setHeadingText(name);

    //after everything is done
    event.preventDefault();
  }

  return (
    <div className="container">
      <h1>Hello {headingText}</h1>
      <form onSubmit={handleClick}>
        <input
          onChange={handleChange}
          type="text"
          placeholder="What's your name?"
          value={name}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

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

value={name}

но если мы это сделаем, а затем получим доступ к значению, введенному пользователем через event.target.value, как он сможет отслеживать, что пользователь вводит в поле ввода, поскольку мы установили значение = {имя}. Разве event.target.value не должен давать нам значение переменной имени вместо пользовательского ввода


reactjs react-hooks controlled-component
person rv7    schedule 21.05.2021    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю так.

value={name} — внешнее состояние для элемента ввода. В терминах React это реквизит.

И event.target.value происходит из внутреннего состояния элемента input сразу после нажатия пользователем клавиши. В терминах реакции это состояние.

Таким образом, вы меняете свое внутреннее состояние от пользовательского ввода. Это event.target.value

И вы устанавливаете опору элемента ввода при повторном рендеринге родительского компонента. это value={name}

person Zhang TianYu    schedule 21.05.2021

arrow_upward
0
arrow_downward

Ответ заключается в том, что реакция - это односторонний поток данных. Он не связан в обоих направлениях, как angularjs или Angular [(ngModel)]. Это означает, что внутренние обновления состояния элемента DOM не вступают в силу до тех пор, пока компонент не будет повторно визуализирован, и компонент не будет повторно визуализироваться, пока состояние компонента не будет изменено. Следовательно, значение на входе не устанавливается реакцией до тех пор, пока не изменится состояние. Вы можете изменить значение на входе столько, сколько хотите, и реакция ничего не сделает, пока не будет запущен обработчик onChange, который затем обновляет состояние. Только тогда он повторно отобразит компонент и поместит новое значение в поле ввода.

Пока не произойдет повторный рендеринг, состояние реакции и внутреннее состояние элемента <input> не синхронизированы. event.target.value считывает внутреннее состояние элемента ввода, а {name} считывает значение свойства name в данном случае компонента App. Эти два компонента повторно синхронизируются при повторном рендеринге компонента.

person mhodges    schedule 21.05.2021
comment
не является event.target.value таким же, как input.value и input.value={name}. Я до сих пор не могу понять, когда мы печатаем, мы меняем input.value, но мы установили input.value={name} - person rv7; 22.05.2021
comment
Как он обновляется при нажатии клавиши, поскольку мы уже установили входное значение {name} - person rv7; 22.05.2021
comment
Состояние компонента @rv7 не совпадает с локальным состоянием элемента HTML. Состояние компонента будет устанавливать локальное состояние HTML-элемента при отображении компонента, но в остальном вы можете изменить локальное состояние. Они не синхронизируются постоянно, как при использовании [(ngModel)] в Angular. - person mhodges; 23.05.2021