Nie można wpisać w polu tekstowym React

Próbuję mojego pierwszego fragmentu React.js i jestem zaskoczony ... Mam poniższy kod, który renderuje formularz wyszukiwania na <div id="search"></div> . Ale wpisanie w polu wyszukiwania nic nie daje.

Przypuszczalnie czegoś brakuje podczas przekazywania rekwizytów i stanu w górę iw dół, a to wydaje się być częstym problemem. Ale jestem zaskoczony - nie widzę, czego brakuje.

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')
);

(W końcu będę miał inne rodzaje, SearchFacet*ale próbuję tylko sprawić, by ten działał.)

Nie umieściłeś poprawnie swojego onchangerekwizytu w input. Musi być onChangew formacie JSX.

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

Temat przekazywania właściwości valuedo an <input>, a następnie w jakiś sposób zmienianie wartości przekazywanej w odpowiedzi na interakcję użytkownika za pomocą onChangeprocedury obsługi jest dość dobrze rozważany w dokumentacji .

Odnoszą się do takich danych wejściowych, jak Komponenty kontrolowane , a do danych wejściowych, które zamiast tego pozwalają modelowi DOM natywnie obsługiwać wartość wejściową i późniejsze zmiany wprowadzone przez użytkownika jako Komponenty niekontrolowane .

Ilekroć ustawiasz właściwość valuean inputna jakąś zmienną, masz komponent kontrolowany . Oznacza to, że musisz zmienić wartość zmiennej za pomocą jakichś programowych środków, w przeciwnym razie wejście zawsze będzie zawierało tę wartość i nigdy się nie zmieni, nawet gdy wpiszesz - natywne zachowanie wejścia, aby zaktualizować jego wartość przy wpisywaniu, jest nadpisywane przez React here.

Więc poprawnie pobierasz tę zmienną ze stanu i masz program obsługi, który zaktualizuje stan, wszystko skonfigurowane poprawnie. Problem polegał na tym, że masz onchangei nie poprawny onChangeprogram obsługi nigdy nie był wywoływany, a więc valuenigdy nie był aktualizowany podczas wpisywania danych wejściowych. Kiedy używasz onChangeprogramu obsługi jest wywoływany, value jest aktualizowany podczas wpisywania i widzisz zmiany.

Użycie value={whatever}spowoduje, że nie będzie można wpisywać w polu wejściowym. Powinieneś użyć defaultValue="Hello!".

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

Ponadto, onchangepowinny być onChangejak @davnicwil zaznacza.

Może to być spowodowane tym, że funkcja onChange nie aktualizuje prawidłowej wartości, która jest podana w danych wejściowych.

Przykład:

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

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

w funkcji onChange zaktualizuj wspomniane pole wartości.

Ja też mam ten sam problem iw moim przypadku prawidłowo wtrysnąłem reduktor ale nadal nie mogłem wpisać w pole. Okazuje się, że jeśli używasz immutable, musisz użyć 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 */

Zauważ, że twój stan powinien wyglądać tak, jak w state->formprzeciwnym razie musisz jawnie skonfigurować bibliotekę, a także powinna być nazwa stanu form. zobacz ten problem

U mnie następująca prosta zmiana zadziałała idealnie

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

zmień ... wartość = {myPropVal} na ... defaultValue = {myPropVal}

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

W kontekście komponentu klasy ...

Jeśli metoda changeHandler jest normalną funkcją:

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

może być używany tak jak ten ...onChange={(e)=>this.handleChange(e)}

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

Jeśli metoda changeHandler jest funkcją strzałkową:

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

można go używać w ten sposób ... onChange={this.handle}

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

I to rozwiązało mój problem „Nie można wpisać pola tekstowego w Reakcie”.