反応の入力値を取得できませんでしたか？

Question

ユーザーが検索をクリックしたが失敗したときに入力値を取得しようとしました。

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

入力の価値を得るためにはこれ以上単純なことはありませんか？

Answer 1

主な問題は、あなたのonChangeの周りに引用符を持っていることです。

onChange="{this.handleChange}" 

それはそれらを持つべきではない、それは文字列値に設定しています。ジャスト：

onChange={this.handleChange} 

（あなたがボタン上onClickで行ったように）。

また、設定する必要がありますvaluethis.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>