Невозможно ввести текстовое поле React input

Я пытаюсь выполнить свой первый бит React.js, и я наступил раньше... У меня есть код ниже, который отображает форму поиска в <div id="search"></div>. Но ввод в поле поиска ничего не делает.

Предположительно что-то пропало, пропуская реквизит и состояние вверх и вниз, и это похоже на общую проблему. Но я в тупике - я не вижу, чего не хватает.

var SearchFacet = React.createClass({
  handleChange: function() {
    this.props.onUserInput(
      this.refs.searchStringInput.value
    )
  },
  render: function() {
    return (
      <div>
        Search for:
        <input
          type="text"
          value={this.props.searchString}
          ref="searchStringInput"
          onchange={this.handleChange} />
      </div>
    );
  }
});

var SearchTool = React.createClass({
  render: function() {
    return (
      <form>
        <SearchFacet 
          searchString={this.props.searchString}
          onUserInput={this.props.onUserInput}
         />
        <button>Search</button>
      </form>
    );
  }
});

var Searcher = React.createClass({
  getInitialState: function() {
    return {
      searchString: ''
    }
  },

  handleUserInput: function(searchString) {
    this.setState({
      searchString: searchString
    })
  },

  render: function() {
    return (
      <div>
        <SearchTool 
          searchString={this.state.searchString}
          onUserInput={this.handleUserInput}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <Searcher />,
  document.getElementById('searcher')
);

(В конце концов у меня будут другие типы SearchFacet*, но я просто пытаюсь заставить это работать.)

Ответы

Ответ 1

Вы не правильно onchange свою опору onchange на input. Это должно быть onChange в JSX.

<input
  type="text"
  value={this.props.searchString}
  ref="searchStringInput"
  onchange={this.handleChange} <--[should be onChange]
/>

Тема передачи value prop в <input>, а затем каким-то образом изменить значение, передаваемое в ответ на взаимодействие с пользователем с помощью обработчика onChange довольно хорошо рассмотрена в документации.

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

Всякий раз, когда вы устанавливаете value prop input на некоторую переменную, у вас есть контролируемый компонент. Это означает, что вы должны изменить значение переменной некоторыми программными средствами, иначе ввод всегда будет содержать это значение и никогда не изменится, даже когда вы печатаете - собственное поведение ввода, чтобы обновить его значение при вводе, переопределяется Реагируйте здесь.

Итак, вы правильно берете эту переменную из состояния, и у вас есть обработчик для обновления состояния, все настроено нормально. Проблема была в том, что у вас есть onchange а не правильный onChange обработчик никогда не вызывался, и поэтому value никогда не обновлялось при вводе во ввод. Когда вы используете onChange обработчик, value обновляется при onChange, и вы видите ваши изменения.

Ответ 2

Использование value={whatever} приведет к тому, что вы не сможете ввести поле ввода. Вы должны использовать defaultValue="Hello!".

См. https://facebook.github.io/react/docs/uncontrolled-components.html#default-values

Кроме того, onchange должен быть onchange, как указывает @davnicwil.

Ответ 3

Это может быть вызвано тем, что функция onChange не обновляет правильное значение, указанное во входных данных.

Пример:

<input type="text" value={this.state.textValue} onChange = {this.changeText}></input>

 changeText(event){
        this.setState(
            {textValue : event.target.value}
        );
    }

в функции onChange обновите указанное поле значения.

Ответ 4

У меня тоже такая же проблема, и в моем случае я правильно ввел редуктор, но все же я не мог вводить поле. Оказывается, если вы используете immutable, вы должны использовать redux-form/immutable.

import {reducer as formReducer} from 'redux-form/immutable';
const reducer = combineReducers{

    form: formReducer
}
import {Field, reduxForm} from 'redux-form/immutable';
/* your component */

Обратите внимание, что ваше состояние должно быть как state->form, иначе вам нужно явно настроить библиотеку, и имя для состояния должно быть form. см. этот issue