Не могу ввести в текстовое поле реагировать

Question

Не могу ввести в текстовое поле реагировать

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

612 4

javascript reactjs

4 ответов:

Comments

Ничего не найдено.

davnicwil · Accepted Answer · 2018-05-24 01:03:48

на
render: function() {
  return (
    <div>
      Search for:
      <input
        type="text"
        value={this.props.searchString}
        ref="searchStringInput"
        onchange={this.handleChange} />
    </div>
  );
}
вы не правильно обложили ваш onchange собственность. Это должно быть onChange - попробуйте это и посмотрите, вызывает ли он теперь обработчик.

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

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

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

Ivan · Accepted Answer · 2016-12-21 09:40:42

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

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

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

sunaina kotekar · Accepted Answer · 2017-08-28 05:45:36

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

пример:
<input type="text" value={this.state.textValue} onChange = {this.changeText}></input>

 changeText(event){
        this.setState(
            {this.state.textValue : event.target.value}
        );
    }
в функции onChange обновите указанное поле значения.

Seyed Jalal Hosseini · Accepted Answer · 2017-10-31 20:06:42

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