未受控制的文本区域元素

渲染一个未受控制的 <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="在这里插入一些文本..."
    onValueChange={val => console.log(val)}
  />
);