Не удается ввести текстовое поле ввода React

Я пытаюсь мой первый бит реагировать.js и am зашли в тупик рано... У меня есть код ниже, который отображает форму поиска в <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* но я просто пытаюсь получить эту работу.)

58
javascript reactjs

4 ответов

на

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

вы не правильно cased ваш onchange собственность. Это должно быть onChange - попробуйте это и посмотрите, вызывает ли он теперь обработчик.

обновление, так как этот вопрос имеет много мнений и предоставление немного дополнительного контекста является ценным:

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

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

45

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

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

и onchange должно быть onChange как указывает @davnicwil.

121

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

пример:

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

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

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

5

у меня также есть такая же проблема, и в моем случае я ввел редуктор правильно, но все же я не мог ввести поле. Оказывается, если вы используете 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. смотрите это вопрос

1