React 中的不受控文本区域元素

简介

在本实验中，我们将学习如何在 React 中创建一个不受控的 <textarea> 元素。本实验的目的是展示如何使用 defaultValue 和 onChange 属性将文本区域的值传递给父组件中的回调函数。完成本实验后，你将对如何在 React 中创建不受控输入字段有更深入的理解。

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

不受控文本区域元素

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

此函数会渲染一个不受父组件控制的 <textarea> 元素。它使用一个回调函数将输入的值传递给父组件。

要使用此函数：

从父组件传递 defaultValue 属性作为输入字段的初始值。
使用 onChange 事件触发 onValueChange 回调，并将新值发送给父组件。

const TextArea = ({
  cols = 20,
  rows = 2,
  defaultValue,
  onValueChange,
  ...rest
}) => {
  return (
    <textarea
      cols={cols}
      rows={rows}
      defaultValue={defaultValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

示例用法：

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

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

总结

恭喜你！你已完成不受控文本区域元素实验。你可以在 LabEx 中练习更多实验来提升你的技能。