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

Question

i'm using jquery change function but when i change input value i got an empty string !! this is my code any help plz :

 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

As I can't see any markup, I'll assume there's no ref used to select the element once mounted to the DOM , what you have to do :

• Use a DOM ref instead of CSS selector.

• Set the state inside the callback.

Don't forget you can use onChange directly in your input element as well.

Answer 2

You should nest all your code in the change handler, use a fat arrow change handler to preserve your this scope and instead of pulling your value from $(this).val() , you should be accepting an event param and use e.target.value to get the input value:

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