Управляемые и неуправляемые компоненты в React: Что, как и когда использовать?

TypeScript
Копировать
handleChange(event) {
  // Мы полностью контролируем, что попадет в состояние
  setInputValue({value: event.target.value.toUpperCase()});
}

TypeScript
Копировать
class NameForm extends React.Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef(); // Создаем реф
  }

  handleSubmit(event) {
    // При отправке формы берем значение прямо из DOM через реф
    alert('Отправленное имя: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
   return (
     <form onSubmit={this.handleSubmit}>
       <label>
       Имя:
       {/* Привязываем реф к нашему инпуту */}
       <input type="text" ref={this.input} /> 
       </label>
     <input type="submit" value="Отправить" />
    </form>
    );
   }
}