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

由于我看不到任何标记，因此我假设没有 ref 用于选择安装到DOM的元素，您必须执行以下操作：

• 使用DOM ref 而不是CSS选择器。

• 在回调中设置状态。

不要忘记您也可以直接在输入元素中使用onChange 。

Answer 2

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

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