尝试在用户点击搜索但失败时获取输入的值。
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>;
}
})
有没有更直接的获取输入值的方法?
最佳答案
主要问题是您的 onChange
有引号:
onChange="{this.handleChange}"
它不应该有它们,这是将它设置为一个字符串 值。只是:
onChange={this.handleChange}
(就像您在按钮上使用 onClick
所做的那样)。
您还需要将 value
设置为 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>
关于javascript - 在 react 中获取输入值失败?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41239000/