在 React 中为 Input 元素设置默认值

在 React 中为 Input 元素设置默认值：

1. 将默认值作为参数传递给受控字段的 useState 挂钩。
2. 在不受控制的 input 字段上设置 defaultValue 属性。

import {useRef, useState} from 'react';

export default function App() {
  const [firstName, setFirstName] = useState('Default value');

  const ref = useRef(null);

  const handleClick = () => {
    console.log(ref.current.value);
  };

  return (
    <div>
      {/* 👇️ for a controlled input field */}
      <input
        value={firstName}
        onChange={event => setFirstName(event.target.value)}
      />

      {/* 👇️ for a controlled input field */}
      <input ref={ref} defaultValue="zadmei.com" />
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

代码片段显示了如何为受控和非受控输入字段设置默认值。

使用受控输入字段时，我们将默认值传递给 useState 钩子。

const [firstName, setFirstName] = useState('Default value');

useState 钩子将初始状态作为参数，因此 firstName 状态变量将被初始化为默认值。

确保我们没有在受控输入字段上设置 defaultValue 属性，因为不允许同时设置 value 和 defaultValue 属性。

要为不受控制的输入字段设置默认值，请在该字段上设置 defaultValue 属性。

import {useRef} from 'react';

export default function App() {
  const ref = useRef(null);

  const handleClick = () => {
    console.log(ref.current.value);
  };

  return (
    <div>
      {/* 👇️ for a controlled input field */}
      <input ref={ref} defaultValue="My default value" />
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

请注意 ，我们没有在不受控制的输入字段上设置 value 或 onChange 属性。

我们可以使用 defaultValue 属性将初始值传递给不受控制的输入。 但是，这不是必需的，如果您不想设置初始值，可以省略该属性。

当使用不受控制的输入字段时，我们使用 ref 访问输入。

每次用户单击示例中的按钮时，不受控制的输入值都会被记录下来。

我们不应该在不受控制的输入（没有 onChange 处理程序的输入字段）上设置 value prop，因为这会使输入字段不可变并且我们将无法输入。