Можно ли вызвать действие из функции компонентов?

Question

У меня есть вопрос, есть ли возможность вызывать действия из функции или обработчика событий?Я использую React-Redux.

Пример:

    export class Page extends React.Component {

    onSomething() {
        this.props.onAdd();
      };

    render() {
        return (
             <div>
               <List
                 SomeMethod={this.onSomething};
               />
             </div>
           );
         }
    }

    Page.propTypes = {
      onAdd: PropTypes.func,
    };

    export function mapDispatchToProps(dispatch) {
      return {
        onAdd: evt => {
          dispatch(fetchAdd());
        },
      };
    }

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReducer = injectReducer({ key: 'page', reducer });
const withSaga = injectSaga({ key: 'page', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect,
)(Page);

Я получаю сообщение об ошибке: Uncaught TypeError: Cannot read property 'onAdd' of undefined

Может кто-то знает, что я делаю плохо?

Answer 1

Вам просто не хватает контекста this в функции onSomething.Вы можете связать его либо в конструкторе, через свойства класса или как функцию стрелки в вашем jsx

export class Page extends React.Component {
  constructor() {
    this.onSomething = this.onSomething.bind(this);
  }
  // ...
};

, либо в свойствах класса (требуется плагин babel)

export class Page extends React.Component {
  onSomething = () => {
    this.props.onAdd();
  }
  // ...
};

или через стрелкуфункция в JSX

render() {
  return (
    <div>
      <List
        SomeMethod={() => this.onSomething()};
      />
    </div>
  );
}