Eingabefeld Text eingeben kann nicht eingegeben werden

Ich versuche mein erstes Stück React.js und bin schon früh ratlos ... Ich habe den folgenden Code, in den ein Suchformular gerendert wird <div id="search"></div>. Das Eingeben in das Suchfeld bewirkt jedoch nichts.

Vermutlich fehlt etwas, wenn man die Requisiten passiert und auf und ab geht, und dies scheint ein häufiges Problem zu sein. Aber ich bin ratlos - ich kann nicht sehen, was fehlt.

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

(Irgendwann werde ich andere Arten von haben, SearchFacet*aber ich versuche nur, diese zum Laufen zu bringen.)

Sie haben Ihre onchangeRequisite nicht richtig in der input. Es muss onChangein JSX sein.

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

Das Thema, eine valueRequisite an eine zu übergeben <input>und dann den als Reaktion auf Benutzerinteraktion mit einem onChangeHandler übergebenen Wert irgendwie zu ändern, wird in den Dokumenten ziemlich gut berücksichtigt .

Sie beziehen sich auf Eingaben wie gesteuerte Komponenten und auf Eingaben, mit denen das DOM stattdessen den Wert der Eingabe und nachfolgende Änderungen des Benutzers nativ als nicht kontrollierte Komponenten verarbeiten kann .

Immer wenn Sie die valueStütze von a auf eine inputVariable setzen, haben Sie eine kontrollierte Komponente . Dies bedeutet, dass Sie den Wert der Variablen auf programmatische Weise ändern müssen. Andernfalls enthält die Eingabe immer diesen Wert und ändert sich auch während der Eingabe nie. Das native Verhalten der Eingabe, um ihren Wert beim Tippen zu aktualisieren, wird überschrieben von Hier reagieren.

Sie nehmen diese Variable also korrekt aus dem Status und haben einen Handler, um den Status zu aktualisieren. Das Problem war, dass Sie den Handler nie aufgerufen haben onchangeund nicht den richtigen, onChangeder beim Aufrufen valueder Eingabe nie aktualisiert wurde. Wenn Sie das tun verwenden onChangedie Handler wird aufgerufen, das value wird aktualisiert , wenn Sie schreiben, und sehen Sie Ihre Änderungen.

Wenn value={whatever}Sie verwenden, wird das Eingabefeld nicht eingegeben. Sie sollten verwenden defaultValue="Hello!".

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

Auch sollte das onchangesein, onChangewie @davnicwil hervorhebt.

Dies kann daran liegen, dass die Funktion onChange nicht den richtigen Wert aktualisiert, der in der Eingabe angegeben ist.

Beispiel:

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

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

Aktualisieren Sie in der Funktion onChange das angegebene Wertefeld.

Ich habe auch das gleiche Problem und in meinem Fall habe ich das Reduzierstück richtig eingespritzt, aber ich konnte immer noch kein Feld eingeben. Es stellt sich heraus, wenn Sie verwenden immutable, müssen Sie verwenden 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 */

Beachten Sie, dass Ihr Status so sein sollte, dass state->formSie die Bibliothek explizit konfigurieren müssen. Außerdem sollte der Name für den Status lauten form. siehe dieses Problem

Für mich hat die folgende einfache Änderung perfekt funktioniert

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

Ändern Sie ... value = {myPropVal} in ... defaultValue = {myPropVal}

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

In einem Klassenkomponentenkontext ...

Wenn die changeHandler-Methode eine normale Funktion ist:

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

es kann so verwendet werden ...onChange={(e)=>this.handleChange(e)}

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

Wenn die changeHandler-Methode eine Pfeilfunktion ist:

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

es kann so verwendet werden ... onChange={this.handle}

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

Und dies löste mein Problem "Eingabefeld kann nicht eingegeben werden".