React中jQuery change函数无法正确更新变量，输入值返回空字符串求助

嘿，我帮你捋捋为啥会出现这个问题，以及怎么搞定它～

问题根源 #

你现在的代码有两个核心问题：

1. 执行顺序搞反了：在componentDidMount里，你先绑定了jQuery的change事件，但紧接着就调用this.setState了！这时候用户还没操作输入框，space_change_value还是初始的空字符串，所以spaces_list肯定是空的。
2. React和jQuery混用的逻辑冲突：React是靠虚拟DOM和自身状态管理来更新UI的，你用jQuery直接操作DOM获取值，相当于绕开了React的状态机制，很容易出现状态和实际DOM不一致的情况。

解决方案 #

方案一：改用React受控组件（强烈推荐） #

完全抛弃jQuery，用React原生的事件处理和状态管理来实现，这才是React的正确打开方式：

class SearchForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input_term_value: "",
      spaces_list: ""
    };
    // 绑定this，确保事件回调里能访问到组件实例
    this.handleSpaceChange = this.handleSpaceChange.bind(this);
  }

  // 处理输入框变化的事件
  handleSpaceChange(evt) {
    const inputValue = evt.target.value;
    this.setState({ spaces_list: inputValue });
  }

  render() {
    return (
      <input
        className="sp-autocomplete-spaces"
        type="text"
        // 受控组件：输入值由state控制
        value={this.state.spaces_list}
        // 绑定React的onChange事件
        onChange={this.handleSpaceChange}
      />
    );
  }
}

这样输入框的状态完全由React管理，输入值变化时会立刻更新spaces_list，再也不会出现空值的问题，也符合React的设计理念。

方案二：如果必须保留jQuery（不推荐，但可修复） #

要是你因为第三方插件（比如自动补全插件）不得不使用jQuery，那得把setState放到change事件的回调里面，还要注意this的指向：

componentDidMount() {
  // 静态输入框直接绑定事件
  $("input.sp-autocomplete-spaces").on("change", (function() {
    const spaceValue = $(this).val();
    // 在这里更新状态，确保是事件触发后才获取值
    this.setState({ spaces_list: spaceValue });
  }).bind(this)); // 绑定this到组件实例，不然setState会报错

  // 如果输入框是动态生成的（比如后续才渲染到DOM），用事件委托
  // $(document).on("change", "input.sp-autocomplete-spaces", (function() {
  //   const spaceValue = $(this).val();
  //   this.setState({ spaces_list: spaceValue });
  // }).bind(this));
}

// 组件卸载时记得解绑事件，防止内存泄漏
componentWillUnmount() {
  $("input.sp-autocomplete-spaces").off("change");
  // 事件委托的解绑方式
  // $(document).off("change", "input.sp-autocomplete-spaces");
}

这样只有当用户操作输入框触发change事件时，才会获取输入值并更新状态，就不会出现初始空值的问题了。

额外提醒 #

尽量避免在React项目里用jQuery操作DOM，两者的状态管理逻辑不一样，长期下来很容易出现难以调试的bug。如果是依赖jQuery的第三方插件，建议找找对应的React版本插件，或者用React原生的方案替代～

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