Неуправляемый ввод диапазона

Введение

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

Skills Graph

Неуправляемый ввод диапазона

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

Чтобы создать ползунок в React, используйте компонент Slider и передайте в него пропсы min, max, defaultValue и onValueChange.

В компоненте Slider задайте type элемента <input> как "range" для создания ползунка. Используйте пропс defaultValue, переданный от родителя, в качестве начального значения для неуправляемого поля ввода. Используйте событие onChange, чтобы вызвать обратный вызов onValueChange и передать новое значение в родительский компонент.

Вот код для компонента Slider:

const Slider = ({
  min = 0,
  max = 100,
  defaultValue,
  onValueChange,
  ...rest
}) => {
  return (
    <input
      type="range"
      min={min}
      max={max}
      defaultValue={defaultValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

Чтобы отрендерить компонент Slider, используйте ReactDOM.createRoot и передайте функцию обратного вызова onValueChange:

ReactDOM.createRoot(document.getElementById("root")).render(
  <Slider onValueChange={(val) => console.log(val)} />
);

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

Резюме

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