未受控制的输入字段

渲染一个未受控制的 <input> 元素，它使用回调函数向其父组件通知值的更新。

• 使用从父组件传递下来的 defaultValue 作为未受控制输入字段的初始值。
• 使用 onChange 事件触发 onValueChange 回调函数，并将新的值发送给父组件。

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

ReactDOM.createRoot(document.getElementById('root')).render(
  <UncontrolledInput
    type="text"
    placeholder="在此处插入一些文本..."
    onValueChange={console.log}
  />
);