【问题标题】:How to pass props to React Big Calendar from custom event?如何从自定义事件将道具传递给 React Big Calendar?
【发布时间】:2020-10-24 07:10:54
【问题描述】:

我需要你的帮助。 我在反应大日历中有一个自定义事件,里面有一个按钮。当我单击按钮时,我想将值传递给日历组件。

我不知道该怎么做。你能帮助我吗?谢谢!

export const Schedule = (params) => {
 const [value, setValue] = useState(null);
 const onClickHandler = (e) => {
    e.preventDefault();
    setValue("aaa");
  };
return (
  <Calendar
    components={{event.CustomEvent}}
    eventPropGetter={(event) => ({
       style: {
         borderLeft: "5px solid",
         display: "block",
       },
    })}
    events={events}
  />
)
} 

还有事件组件


const EventComponent = (props) => {
  const BtnChangeValue = () => {
    return (
      <>
        <button onClick = {setValue("this should change value from Calendar")}></button
      </>
    );
  };

 return(
   <>
     <div>aaaaaa</div>
     <BtnChangeValue onClick={????} />
     <div>eeeee</div>
   </>
 )
}

【问题讨论】:

    标签: reactjs react-hooks setstate custom-events react-big-calendar


    【解决方案1】:

    将您的 components 属性更改为:

    components={{event: () => <CustomEvent onClick={onClickHandler}/>}}
    

    在您的 EventComponent 中,像这样传递道具onClick

    const EventComponent = (props) => {
      const BtnChangeValue = ({ ...args }) => {
        return (
          <>
            <button {...args}></button
          </>
        );
      };
    
     return(
       <>
         <div>aaaaaa</div>
         <BtnChangeValue onClick={props.onClick} />
         <div>eeeee</div>
       </>
     )
    }
    

    【讨论】:

    • 太棒了,就像一个魅力。还有一个问题:如果我想使用事件中的事件名称和其他属性,我应该怎么做?喜欢:```
      {event.name}
      {event.id}
      ```
    • 假设您将通过CustomEvent 中的props 传递所有属性,那么您可以使用props.name 等方式访问它们
    猜你喜欢
    • 2019-08-19
    • 1970-01-01
    • 2017-07-14
    • 2020-12-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-08-01
    相关资源
    最近更新 更多