this.props работает для одного функционала и не работает для другого React-Redux - PullRequest
Новая
       8

this.props работает для одного функционала и не работает для другого React-Redux

0 голосов
/ 13 июня 2018

Моя проблема описана в теме

Здесь это работает: 

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] } );
    }
}

И здесь это не работает: 

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

Это функциитот же класс, и здесь mapDispatchToProps (вне класса ofc) func: 

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

Ответы [ 3 ]

0 голосов
/ 13 июня 2018 
searchHandler(event) {
    this.props.dispatch( { type: 'CHANGE_TERM', payload: event.target.value } );
}

Проблема в "этом".«это» для searchHandler не связано правильно.Для функции handleItemClick, как она определена как функция стрелки, а функция стрелки получает «this» из того места, где она определена.

0 голосов
/ 13 июня 2018

Из реагирующих документов :

Вы должны быть осторожны со значением this в обратных вызовах JSX.В JavaScript методы класса не связаны по умолчанию.Если вы забудете связать this.handleClick и передать его в onClick, this будет undefined, когда функция действительно вызывается.

Это не специфичное для React поведение;это часть того, как функции работают в JavaScript.Обычно, если вы ссылаетесь на метод без () после него, такой как onClick={this.handleClick}, вы должны связать этот метод.

Если вы используете babel, вы можете использовать поля public classсинтаксис , который приведет к автоматическому связыванию this.Обратите внимание, что этот метод все еще не соответствует языковому стандарту и работает только потому, что babel преобразует его в действительный javascript: 

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

. Способ es5 заключается в связывании функции в 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... */ }
}

Обратите внимание, что синтаксис функции стрелки имеет некоторые ограничения.Например, вы не можете переопределить его в классах, которые расширяют класс, в котором он был определен. В реакции это не проблема в большинстве случаев, потому что наследование не рекомендуется в пользу композиции.

0 голосов
/ 13 июня 2018

Для функции, которая не работает, установите функцию стрелки

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

...