Question

我有一个函数组件，该函数将一个事件参数传递给函数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，文档中也没有示例。我该如何解决这个问题？任何帮助将不胜感激！

Answer 1

代码中的

ModalConductor是将props作为输入的功能组件。您将直接访问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”绑定。

传递给功能组件时函数不执行

1 个答案: