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>

反应输入值失败？

1 个答案: