Non riesco a digitare Campo di testo di input React

Question

Sto provando il mio primo bit di React.js e sono stumped presto ... Ho il codice qui sotto, che esegue il rendering di un modulo di ricerca in <div id="search"></div>. Ma digitando nella casella di ricerca non fa nulla.

Presumibilmente qualcosa sta scomparendo passando i puntelli e lo stato su e giù, e questo sembra un problema comune. Ma sono perplesso - non riesco a vedere cosa manca.

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

(Alla fine mi avrà altri tipi di SearchFacet* ma sto solo cercando di ottenere questo lavoro.)

Answer 1

In

render: function() { 
    return (
    <div> 
     Search for: 
     <input 
     type="text" 
     value={this.props.searchString} 
     ref="searchStringInput" 
     onchange={this.handleChange} /> 
    </div> 
); 
} 

Non hai correttamente carter vostra proprietà onchange. Deve essere onChange - provalo e guarda se ora chiama il gestore.

aggiornamento, dal momento che questa domanda ha un sacco di punti di vista e di fornire un po 'di contesto in più è prezioso:

Il tema di passare un puntello value a un <input>, e quindi in qualche modo cambiare il valore passato in risposta all'interazione dell'utente utilizzando un gestore onChange è abbastanza ben considerato in the official docs.

Si riferiscono a tali ingressi come Controlled Components e fanno riferimento a input che consentono al DOM di gestire in modo nativo il valore di input e le successive modifiche dell'utente come Uncontrolled Components.

Answer 2

Utilizzando value={whatever} renderà quindi non è possibile digitare nel campo di immissione. Dovresti usare defaultValue="Hello!".

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

Inoltre, il onchange dovrebbe essere onChange come @davnicwil sottolinea.

Answer 3

Ciò potrebbe essere causato dalla funzione onChange che non aggiorna il valore corretto menzionato nell'input.

Esempio:

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

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

nella funzione OnChange aggiorna il campo valore indicato.

Answer 4

Ho anche lo stesso problema e nel mio caso ho riduttore iniettato correttamente ma ancora non ho potuto digitare in campo. Si scopre che se si utilizza immutable è necessario utilizzare 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 */ 

Si noti che il vostro stato dovrebbe essere come state->form altrimenti si deve config esplicitamente la libreria anche il nome per lo stato dovrebbe essere form. vedi questo issue