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

Setting a default value for an Input element in React

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

将默认值作为参数传递useState给受控字段的挂钩。
defaultValue在不受控制的输入字段上设置道具。

应用程序.js


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="My default value" />
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

设置输入的默认值

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

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

应用程序.js


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

钩子将useState初始状态作为参数，因此firstName
状态变量将被初始化为Default value.

确保您没有defaultValue在受控输入字段上设置道具，因为不允许同时设置value和道具。 defaultValue

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

应用程序.js


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道具。

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

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

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

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

–