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

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 所做的那样)。

您还需要将 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>