Jquery 在 ReactJS 中更改函数不能正确更新变量？

Question

我正在使用 jquery 更改函数，但是当我更改输入值时，我得到一个空字符串！！这是我的代码，请帮忙：

class SearchForm extends React.Component{
   constructor(props) {
    super(props);
    this.state = {input_term_value: "",spaces_list: ""};
   }
   componentDidMount() {
    var space_change_value = "";
    $("input.sp-autocomplete-spaces").change(function() {
     space_change_value = $(this).val();
    });
    this.setState({spaces_list: space_change_value});
   }
   updateInputValue(evt){
    this.setState({input_term_value: evt.target.value});
   }
   componentDidUpdate (prevProps, prevState) {
       this.sendGetRequest();
   }
   sendGetRequest(){
    var _this = this;
    this.serverRequest = 
    axios

Answer 1

因为我看不到任何标记，所以我假设没有引用用于 select 元素一旦安装到 DOM，你必须做的：

使用 DOM ref 而不是 CSS select 或者
在回调中设置状态。

别忘了您也可以直接在输入元素中使用 onChange。

Answer 2

您应该将所有代码嵌套在 change 处理程序中，使用粗箭头更改处理程序来保留您的 this 范围，而不是从 $(this).val() 中提取您的值，您应该接受事件参数并使用 e.target.value 获取输入值：

$("input.sp-autocomplete-spaces").change( e => {
    this.setState({ spaces_list: e.target.value });
});

Jquery 在 ReactJS 中更改函数不能正确更新变量？

Jquery change function doesn't update variable correctly in ReactJS?

javascript

components

onchange

jquery-select2

reactjs