用 React 掌握不受控输入字段

简介

在本实验中，我们将探索如何使用 React 创建一个不受控输入字段。不受控输入字段是一种简单且灵活的捕获用户输入的方式，无需在父组件中管理值状态。我们将使用回调函数通知父组件有关值更新的信息，从而便于与其他组件和 API 集成。

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

不受控输入字段

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

这段代码渲染了一个不受控的 <input> 元素，它使用回调函数将值更新通知给其父组件。使用方法如下：

使用 defaultValue 属性从父组件传递初始值。
传递一个名为 onValueChange 的回调函数来处理值更新。
使用 onChange 事件触发回调并将新值发送给父组件。

以下是一个示例：

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

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

请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

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