Реагировать на поля текстовой формы без onChange

Question

Есть ли какой-либо способ (приведите пример) в React / React Native, чтобы компонент отображал таймер с миллисекундами, кнопку отправки и поле ввода текста, где выполняются следующие условия?

1. Пользователь может ввести в поле ввода и посмотреть, что он печатает.
2. Для поля ввода не назначены обработчики событий
3. При нажатии кнопки отправки программа отображает предупреждение() с текстом, набранным пользователем.
4. Компонент имеет начальное значение состояния, которое первоначально отображается в поле ввода.
5. Пользователь не испытывает неожиданного поведения при вводе.

A предыдущий вопрос по этому вопросу приведет меня к более конкретному вопросу по этому вопросу (надеюсь, вы сможете увидеть, как он связан).

Наиболее частоПринятый шаблон в React для реализации полей ввода предлагает всегда использовать событие onChange ( см. документы ), но я думаю, что это приводит к повторению и nв коде, поэтому я ищу лучший шаблон, в котором разработчику не нужно думать о поведении onChange, когда все, что ему нужно, - это поле формы ввода.

Дополнительное примечание 1: «Значение состояния» - это значение в состоянии компонента.т.е. "constructor () {this.state = {value: 'Initial Value'}};".

Дополнительное примечание 2: Цель таймера - убедиться, что выпериодически вызывая render (), что затрудняет отображение начального «значения состояния» и позволяет пользователю нормально печатать без обработчика onChange для соответствующего обновления состояния.

Answer 1

То, что вы ищете, называется неконтролируемыми компонентами.

Взгляните сюда: https://reactjs.org/docs/uncontrolled-components.html

Answer 2

Ваши условия будут выполнены с этим шаблоном на основе ссылок?

class App extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = null;
  }
  
  handleSubmit = () => alert(this.textInput.getDOMNode().value);
  render() {
    return (
      <div>
        <textarea 
          ref={el => this.textInput = el}
        >
          My initial value
        </textarea>
        <button onClick={this.handleSubmit}type="button">Submit</button>
      </div>
    );
  }
  
}

React.render(<App />, document.getElementById('app'));

<div id="app"></div>

Рабочий код: https://codepen.io/anon/pen/roypOx

Поскольку условия касаются только поля ввода, а не таймеров, я не включил таймерв примере.