Неможливо ввести текстове поле Реагувати введення

Я пробую свій перший шматочок 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*але я просто намагаюся змусити цю роботу.)

Ви неправильно зарекомендували себе onchangeв програмі input. Це має бути onChangeв JSX.

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

Тема передачі valueреквізиту до <input>, а потім якось змінити значення, передане у відповідь на взаємодію користувачів за допомогою onChangeобробника, досить добре розглядається в документах .

Вони посилаються на такі входи як " Керовані компоненти" і посилаються на входи, які натомість дозволяють домену DOM самостійно обробляти значення вводу та наступні зміни від користувача як неконтрольовані компоненти .

Щоразу, коли ви встановлюєте valueопору inputна якусь змінну, у вас є контрольований компонент . Це означає , що ви повинні змінити значення змінної з допомогою деяких програмних засобів чи інакше вхід завжди матиме це значення і ніколи не зміниться, навіть якщо ви наберете - рідне поведінку на вході, щоб оновити значення на типізації, є перевизначені тут реагує.

Отже, ви правильно приймаєте цю змінну зі стану та маєте обробник, щоб оновити стан. Проблема полягала в тому, що у вас є, onchangeа не правильний onChangeобробник ніколи не викликався, і тому valueвін ніколи не оновлювався під час введення вводу. Коли ви використовуєте onChangeобробник буде викликаний, value буде оновлюватися при введенні, і ви побачите зміни.

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

Дивіться https://facebook.github.io/react/docs/uncont kontroli- components.html# default- values

Крім того, onchangeслід бути onChangeтаким, як вказує @davnicwil.

Це може бути викликано тим, що функція onChange не оновлює належне значення, яке згадується у вході.

Приклад:

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

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

у функції onChange оновіть згадане поле значення.

У мене також є така ж проблема, і в моєму випадку я вводив редуктор належним чином, але все одно не міг набрати в поле. Виявляється, якщо ви користуєтеся, 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. див. це питання

Для мене наступна проста зміна спрацювала чудово

<input type="text" 
        value={props.letter} 
        onChange={event => setTxtLetter(event.target.value)} /> {/* does not work */}

змінити ... value = {myPropVal} на ... defaultValue = {myPropVal}

<input type="text" 
        defaultValue={props.letter} 
        onChange={event => setTxtLetter(event.target.value)} /> {/* Works!! */}

У контексті компонента класу ...

Якщо метод changeHandler є нормальною функцією:

handleChange(e){
    this.setState({[e.target.name]:[e.target.value]});
}

його можна використовувати, наприклад, цей ...onChange={(e)=>this.handleChange(e)}

<input type="text" name="any" value={this.state.any} onChange={(e)=>this.handleChange(e)}></input>

Якщо метод changeHandler є функцією стрілки:

handle = (e) =>{
        this.setState({[e.target.name]:[e.target.value]});
    }

його можна використовувати так ... onChange={this.handle}

 <input type="text" name="any2" value={this.state.any2} onChange={this.handle} ></input>

І це вирішило мою проблему "Не можу набрати в текстовому полі" Реагувати текст ".