Контролируемое поле ввода

Введение

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

Контролируемое поле ввода

В ВМ уже предоставлены index.html и script.js. В общем, вам нужно добавлять код только в script.js и style.css.

Этот фрагмент кода представляет собой контролируемый элемент <input>, который использует функцию обратного вызова для информирования своего родителя обо всех обновлениях его значения. Вот, как это работает:

• Значение контролируемого поля ввода определяется пропсом value, передаваемым от родителя.
• Любые изменения, внесенные пользователем в поле ввода, захватываются событием onChange, которое вызывает функцию обратного вызова onValueChange и отправляет новое значение обратно к родительскому компоненту.
• Чтобы обновить значение поля ввода, родитель должен обновить проп value, который он передает в контролируемый компонент ввода.

Вот пример реализации компонента ControlledInput, за которым следует пример его использования в компоненте Form:

const ControlledInput = ({ value, onValueChange, ...rest }) => {
  return (
    <input
      value={value}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

const Form = () => {
  const [value, setValue] = React.useState("");

  return (
    <ControlledInput
      type="text"
      placeholder="Insert some text here..."
      value={value}
      onValueChange={setValue}
    />
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<Form />);

Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по контролируемым полям ввода. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.