Eingangswert in Reaktion erhalten fehlgeschlagen?

Question

Es wurde versucht, den Wert der Eingabe zu erhalten, wenn der Benutzer auf die Suche klickt, aber fehlgeschlagen ist.

var Login = React.createClass({ 
    getInitialState: function() { 
    return {name: ''}; 
    }, 
    handleSearch(){ 
    alert(this.state.name); // doesn't work? 
    }, 
    handleChange(e){ 
    this.setState({name: e.target.value}); 
    }, 
    render() { 
    return <div> 
     <input type="text" placeholder="name" onChange="{this.handleChange}" value=""/><button onClick={this.handleSearch}>Search</button> 
    </div>; 
    } 
}) 

Gibt es noch mehr direkt den Wert der Eingabe zu erhalten?

Answer 1

Das Hauptproblem ist, dass Sie Anführungszeichen um Ihre onChange haben:

onChange="{this.handleChange}" 

es sie nicht haben sollte, das ist es zu einem String Wert. Nur:

onChange={this.handleChange} 

(wie Sie mit onClick auf die Schaltfläche tat).

Sie werden auch festlegen müssen value zu this.state.name:

var Login = React.createClass({ 
 
    getInitialState: function() { 
 
    return {name: ''}; 
 
    }, 
 
    handleSearch(){ 
 
    console.log("name is", this.state.name); 
 
    }, 
 
    handleChange(e){ 
 
    this.setState({name: e.target.value}); 
 
    }, 
 
    render() { 
 
    return <div> 
 
     <input type="text" placeholder="name" onChange={this.handleChange} value={this.state.name} /><button onClick={this.handleSearch}>Search</button> 
 
    </div>; 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <Login />, 
 
    document.getElementById("react") 
 
);

<div id="react"></div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>