this.props working for one func and don't work for another React-Redux

Question

My problem is described in the topic

Here it works:

handleItemClick = (e, { name }) => {

    if (name !== this.props.prevName) {
        document.getElementById(name).style = 'border: 3px solid black';
        if (document.getElementById(this.props.prevName))
            document.getElementById(this.props.prevName).style = 'border: 1px solid black';
        this.props.dispatch({type: 'CHANGE_PREVNAME', payload: name});
        let i = this.props.items.findIndex(element => {
            return (element.general.firstName + ' ' + element.general.lastName) === name;
        });
        this.props.dispatch( { type: 'CHANGE_SELECTION', payload: this.props.items[i] } );
    }
}

And here it doesn't work:

searchHandler(event) {
    this.props.dispatch( { type: 'CHANGE_TERM', payload: event.target.value } );
}

It's functions of the same class, and here mapDispatchToProps (outside the class ofc) func:

 function mapDispatchToProps(dispatch) {
    return {
      ...bindActionCreators({
        toTakeData: loadItems,
        dispatch: dispatch
      }, dispatch)
    };
}

Answer 1

From the react docs :

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick , this will be undefined when the function is actually called.

This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, such as onClick={this.handleClick} , you should bind that method.

If you use babel you can use the public class fields syntax which will lead to this being bound automatially. Note that this method is still not in the language standard and does only work because babel transforms it to valid javascript:

searchHandler = event => { /* this is defined here ... */ }

The es5 way would be to bind the function in the constructor :

class MyComponent extends Component {
    constructor(props) {
        super(props);

        // bind this to your handler
        this.searchHandler = this.searchHandler.bind(this);

        /* other initialization */
    }

    searchHander(event) { /* you can access this here... */ }
}

Note that the arrow function syntax comes with some limitations. For example you can't override it in classes that extend the class it was defined in. In react this is not a problem most of the time because inheritance is discouraged in favour of composition.

Answer 2

对于该功能不起作用，请使其成为箭头功能

searchHandler = (event) => { ... }

Answer 3

searchHandler(event) {
    this.props.dispatch( { type: 'CHANGE_TERM', payload: event.target.value } );
}

Problem is of "this". "this" for searchHandler is not bound correctly. For handleItemClick function as it is defined as arrow function and arrow function get "this" from where it is defined.