Почему реакция делает ввод [type = "text" ] поля readonly, если я не подаю обратный вызов onChange?

Ответ 1

Приведенный вами пример не доступен только для чтения. См. Этот JSFiddle: http://jsfiddle.net/BinaryMuse/13sbw3dy/

Если вы добавите на вход свойство value={whatever}, которое делает его контролируемым компонентом, то оно доступно только для чтения, вы добавите обработчик onChange, который обновляет значение whatever. Из Документов React:

Почему контролируемые компоненты?

Использование компонентов формы, таких как <input> в React, представляет проблему, отсутствующую при написании традиционной формы HTML. Например, в HTML:

<input type="text" name="title" value="Untitled" />

Это позволяет инициализировать вход со значением Untitled. Когда пользователь обновит ввод, значение свойства node изменится. Однако node.getAttribute('value') все равно вернет значение, используемое во время инициализации, Untitled.

В отличие от HTML, компоненты React должны представлять состояние представления в любой момент времени, а не только во время инициализации. Например, в React:

render: function() {
  return <input type="text" name="title" value="Untitled" />;
}

Поскольку этот метод описывает представление в любой момент времени, значение ввода текста всегда должно быть Untitled.

Ответ 2

В реале компонент отображается только при изменении состояния. Всякий раз, когда изменяется состояние компонента, выполняется соответствующий компонент. Это означает, что мы обновляем виртуальный DOM с новым значением и присоединяем его к основной DOM. Это как реагирует.

В случае ввода текстовых полей значение текстовых полей изменяется только тогда, когда пользователь вводит какое-либо значение. В этом случае мы не обновляем какое-либо состояние, добавляем новое значение к свойству "значение" текстового поля. Таким образом, реакция не будет отображать ничего, а новое значение не добавляется в DOM. Здесь мы нарушаем поведение реагирования. Таким образом, реакция не позволит нам редактировать входные текстовые поля.

Чтобы получить гладкий поток реакции, он позволяет нам использовать функцию изменения вызова для упорядочивания состояния. При изменении значения введенного текста установите состояние с новым значением, чтобы обработать рендер и DOM с новым значением.

Вместо использования функции обратного вызова мы можем использовать свойство valuelink для добавления значения для ввода текста.   как:

getInitialState: function(){
  return {
    value:'' //for empty text value
  }
}

Для ссылки на значение мы должны указать значение состояния вместо переменной. Для полного понимания см.:   https://facebook.github.io/react/docs/two-way-binding-helpers.html

всякий раз, когда мы вводим текст в текстовое поле, состояние обновляется, а значение входного текста устанавливается в состояние.