Impossible de taper dans le champ de texte de saisie React

J'essaye mon premier morceau de React.js et je suis perplexe au début ... J'ai le code ci-dessous, qui rend un formulaire de recherche dans <div id="search"></div>. Mais taper dans le champ de recherche ne fait rien.

Il manque probablement quelque chose en passant les accessoires et l'état de haut en bas, et cela semble être un problème courant. Mais je suis perplexe - je ne vois pas ce qui manque.

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

(Finalement, j'aurai d'autres types de SearchFacet*mais j'essaye juste de faire fonctionner celui-ci.)

Vous n'avez pas correctement placé votre onchangeaccessoire dans le input. Il doit être onChangeen JSX.

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

Le sujet du passage d'un valueaccessoire à un <input>, puis de la modification de la valeur transmise en réponse à l'interaction de l'utilisateur à l'aide d'un onChangegestionnaire est assez bien considéré dans la documentation .

Ils font référence à de telles entrées en tant que composants contrôlés et font référence à des entrées qui permettent au DOM de gérer nativement la valeur de l'entrée et les modifications ultérieures de l'utilisateur en tant que composants non contrôlés .

Chaque fois que vous définissez l' valueaccessoire d'un inputsur une variable, vous avez un composant contrôlé . Cela signifie que vous devez modifier la valeur de la variable par des moyens programmatiques ou bien l'entrée contiendra toujours cette valeur et ne changera jamais, même lorsque vous tapez - le comportement natif de l'entrée, pour mettre à jour sa valeur lors de la frappe, est remplacé par React ici.

Donc, vous prenez correctement cette variable de state, et avez un gestionnaire pour mettre à jour l'état tout mis en place correctement. Le problème était que vous aviez onchangeet non le bon, onChangele gestionnaire n'a jamais été appelé et donc le valuen'a jamais été mis à jour lorsque vous tapez dans l'entrée. Lorsque vous utilisez onChangele gestionnaire est appelé, le value est mis à jour lorsque vous tapez et vous voyez vos modifications.

En utilisant value={whatever}, vous ne pourrez pas taper dans le champ de saisie. Vous devriez utiliser defaultValue="Hello!".

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

De plus, le onchangedevrait être onChangecomme le souligne @davnicwil.

Cela peut être dû au fait que la fonction onChange ne met pas à jour la valeur appropriée mentionnée dans l'entrée.

Exemple:

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

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

dans la fonction onChange, mettez à jour le champ de valeur mentionné.

J'ai aussi le même problème et dans mon cas, j'ai injecté correctement le réducteur mais je ne pouvais toujours pas taper dans le champ. Il s'avère que si vous utilisez, immutablevous devez utiliser 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 */

Notez que votre état doit être le même, state->formsinon vous devez configurer explicitement la bibliothèque, ainsi que le nom de l'état form. voir ce numéro

Pour moi, le simple changement suivant a parfaitement fonctionné

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

changer ... value = {myPropVal} en ... defaultValue = {myPropVal}

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

Dans un contexte de composant de classe ...

Si la méthode changeHandler est une fonction normale:

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

il peut être utilisé comme ça ...onChange={(e)=>this.handleChange(e)}

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

Si la méthode changeHandler est une fonction de flèche:

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

il peut être utilisé comme ça ... onChange={this.handle}

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

Et cela a résolu mon problème "Impossible de taper dans le champ de texte de saisie React".