传递给功能组件时功能不执行答案

【问题标题】：Function Doesn't Execute When Passed to Functional Component传递给功能组件时功能不执行
【发布时间】：2020-01-04 02:43:59
【问题描述】：

我有一个功能组件，我将一个函数addEvent 传递给它，它接受一个事件参数。但是，当我从功能组件内的 props 调用该函数时，该函数不会执行：

const onOk = () => {
  const { title, description, start_time, end_time, remind_time } = formStates;
  const event = { 
    title:title[0], 
    description:description[0], 
    start_time:start_time.toISOString(),
    end_time: end_time.toISOString(),
    remind_time: remind_time.toISOString()
  }
  props.addEvent(event);
  props.hideModal();
};

const ModalConductor = props => {
switch(props.modal.currentModal) {
    case EVENT_FORM_MODAL:
        return <EventsFormModal {...props} title="New Event" addEvent={addEvent}/> 

    default:
        return null;
}
};

传递函数：

export const addEvent = (event) => dispatch => {
console.log(event);
axios
    .post('/api/events/', event)
    .then(res => {
        dispatch({
            type: ADD_EVENT,
            payload: res.data
        });
    }).catch(err => console.log(err));
}

我在 React 文档中读到，将函数传递给组件需要 this.function = this.function.bind(this);。但是，功能组件中没有this，文档中也没有示例。我将如何解决这个问题？任何帮助将不胜感激！

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

在您的代码中 ModalConductor 是您的功能组件，它以道具作为输入。您正在直接访问 addEvent，而不是 props.addEvent。

const ModalConductor = props => {
switch(props.modal.currentModal) {
    case EVENT_FORM_MODAL:
        return <EventsFormModal {...props} title="New Event" addEvent={props.addEvent}/> 

    default:
        return null;
}
};

只要你的函数定义不包含'this'，你就不必担心'this'绑定。

【讨论】：