Почему при указании defaultValue в input, хендлер формы не видит это значение?

При использовании React и указании defaultValue для элемента input, значение этого атрибута не автоматически передается в хендлер формы. Это происходит из-за того, что defaultValue устанавливает изначальное значение элемента input при его рендеринге, и после этого значение внутри компонента React и значение в DOM становятся разными.

Чтобы передать значение элемента input в хендлер формы, вы должны явно обновлять его состояние внутри компонента React. Для этого можно использовать управляемый компонент или контролируемый компонент.

Управляемый компонент - это компонент, значение которого контролируется React через использование состояния (state). Для использования управляемого компонента, вы должны добавить состояние и обработчик изменения значения в ваш компонент React. В обработчике измените состояние компонента на новое значение:

import React, { useState } from 'react';

function MyForm() {
  const [myValue, setMyValue] = useState('');

  const handleChange = (event) => {
    setMyValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Используйте значение myValue для обработки формы
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={myValue} onChange={handleChange} />
      <button type="submit">Отправить</button>
    </form>
  );
}

В этом примере myValue - это состояние, и оно сохраняет текущее значение элемента input. В handleChange мы обновляем это значение при изменении элемента input. И в handleSubmit мы можем использовать значение myValue для обработки формы.

Контролируемый компонент - это форма, в которой каждый элемент ввода компонента имеет свое собственное состояние, которое привязано к значению элемента. Для контролируемого компонента, вы должны явно указать значение элемента input и обработчик изменения значения:

import React from 'react';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myValue: ''
    };
  }

  handleChange = (event) => {
    this.setState({ myValue: event.target.value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    // Используйте значение this.state.myValue для обработки формы
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.myValue} onChange={this.handleChange} />
        <button type="submit">Отправить</button>
      </form>
    );
  }
}

В этом примере myValue хранится в состоянии компонента и обновляется через функцию setState при изменении элемента input. Значение myValue также используется в handleSubmit для обработки формы.

Оба подхода позволяют хранить значение элемента input внутри компонента React и передавать его в хендлер формы, не зависимо от того, было ли значение установлено с помощью defaultValue или пользователь самостоятельно ввел его в поле ввода.