受控输入字段

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

• 使用从父组件传递下来的 value 作为受控输入字段的值。
• 使用 onChange 事件触发 onValueChange 回调函数，并将新值发送给父组件。
• 父组件必须更新输入字段的 value 属性，以便在用户输入时更改其值。

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

const Form = () => {
  const [value, setValue] = React.useState('');

  return (
    <ControlledInput
      type="text"
      placeholder="在此处插入一些文本..."
      value={value}
      onValueChange={setValue}
    />
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <Form />
);