Неуправляемое поле ввода

ReactReactBeginner
Практиковаться сейчас

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react/FundamentalsGroup -.-> react/event_handling("Handling Events") subgraph Lab Skills react/event_handling -.-> lab-38369{{"Неуправляемое поле ввода"}} end

Неуправляемое поле ввода

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

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

  • Передайте начальное значение из родителя с использованием свойства defaultValue.
  • Передайте обратную вызов-функцию с именем onValueChange, чтобы обработать обновления значения.
  • Используйте событие onChange, чтобы вызвать обратный вызов и отправить новое значение родителю.

Вот пример:

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

ReactDOM.createRoot(document.getElementById("root")).render(
  <UncontrolledInput
    type="text"
    placeholder="Insert some text here..."
    onValueChange={console.log}
  />
);

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

Резюме

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