我有一个函数组件,该函数将一个事件参数传递给函数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
,文档中也没有示例。我该如何解决这个问题?任何帮助将不胜感激!
答案 0 :(得分: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”绑定。