React表单无法输入内容，如何正确获取用户输入数据？

嘿，我一眼就发现问题啦！你的输入框没法输入内容，核心原因是**handleChange方法既没绑定this上下文，输入框也没关联onChange事件**。

在React类组件里，类方法默认不会自动绑定this，而且如果输入框不绑定onChange事件，用户输入时根本触发不了状态更新逻辑，自然就没法同步显示输入内容。

给你两种简单的修复方案，任选其一就能解决问题：

方案1：构造函数中手动绑定this #

和你处理handleSubmit的方式一致，在构造函数里给handleChange绑定this，同时给输入框加上onChange事件：

class Search extends Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
    this.handleSubmit = this.handleSubmit.bind(this);
    // 新增：绑定handleChange的this上下文
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ value: event.target.value});
  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }
  render() {
    return (
      <div className="Search">
        <form className="searchBox" onSubmit={this.handleSubmit}>
          {/* 新增：绑定onChange事件 */}
          <input type="text" value={this.state.value} onChange={this.handleChange}/>
          <input type="submit" value="Go" />
        </form>
      </div>
    );
  }
}

方案2：用箭头函数定义类方法 #

箭头函数会自动捕获当前组件的this，不用手动绑定，代码更简洁：

class Search extends Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  // 用箭头函数定义handleChange，自动绑定this
  handleChange = (event) => {
    this.setState({ value: event.target.value});
  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }
  render() {
    return (
      <div className="Search">
        <form className="searchBox" onSubmit={this.handleSubmit}>
          <input type="text" value={this.state.value} onChange={this.handleChange}/>
          <input type="submit" value="Go" />
        </form>
      </div>
    );
  }
}

修复后，你输入内容时state.value会实时更新，输入框能同步显示输入内容，提交弹窗也能正确拿到用户输入的值啦！

内容的提问来源于stack exchange，提问作者SirArchibald