Невозможно ввести текстовое поле ввода ответа

Question

Я пытаюсь выполнить свой первый бит 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*, но я просто пытаюсь получить это работает.)

Answer 1

В

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

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

Update, , поскольку этот вопрос имеет много взглядов и предоставление немного дополнительного контекста ценен:

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

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

Answer 2

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

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

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

Answer 3

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

Пример:

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

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

в функции OnChange обновить поле выше значение.

Answer 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