JIYIK CN >

To set a default value for an Input element in React:

1. Pass a default value as a parameter to the controlled field's useStatehook.
2. Set the attribute on an uncontrolled input field 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="jiyik.com" />
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

The code snippet shows how to set default values ​​for controlled and uncontrolled input fields.

When using controlled input fields, we pass a default value to useStatethe hook.

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

useStateThe hook takes the initial state as argument, so firstNamestate variables will be initialized to default values.

Make sure we don't set the property on the controlled input field defaultValue, as setting both the valueand defaultValueproperties at the same time is not allowed.

To set a default value for an uncontrolled input field, set defaultValuethe property on the field.

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, we do not set the or attributes on the uncontrolled input fields onChange.

We can use defaultValuethe attribute to pass an initial value to an uncontrolled input. However, this is not required and you can omit the attribute if you do not want to set an initial value.

When working with uncontrolled input fields, we use refto access the input.

Each time the user clicks the button in the example, the uncontrolled input value is recorded.

We should not set the value prop on uncontrolled inputs ( onChangeinput fields without a handler) because this will make the input field immutable and we won't be able to input.