掌握 React 滑块：不受控范围输入

简介

在本实验中，我们将探索如何在 React 中创建一个不受控的范围输入元素，该元素允许用户通过沿水平线滑动按钮来从一系列数字中选择值。我们将使用回调函数将选定的值传递给父组件。在本实验结束时，你将更好地理解如何在 React 中使用 onChange 事件和 defaultValue 属性。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

不受控范围输入

虚拟机中已提供了 index.html 和 script.js。一般来说，你只需在 script.js 和 style.css 中添加代码。

要在 React 中创建滑块，请使用 Slider 组件并传入 min、max、defaultValue 和 onValueChange 属性。

在 Slider 组件中，将 <input> 元素的 type 设置为 "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 服务。然后，你可以刷新“Web 8080”标签页以预览网页。

总结

恭喜你！你已经完成了不受控范围输入实验。你可以在 LabEx 中练习更多实验来提升你的技能。