javascript - 在 react 中获取输入值失败？

试图在用户单击搜索时获取输入的值，但失败了。

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>