如何使用 onClick 在 React 中切换两个组件

Question

在 React 中，我有一个只有一个月的日历，我使用 /> 标签创建了这个日历，我正在研究的概念是当我单击要创建事件的随机日期时（ form) 并提交它，但如果这一天已经有一个事件，我想显示这一天创建的事件的概述（（类似于谷歌日历）。

如何根据创建的事件在 Form( 以在这一天创建事件) 和 Event 组件之间切换 onClick？

日历组件

import React,{useState} from 'react';
import Day from './Day';
import Event from './Event';


const Calendar = () => {
    const [eventForm, showEventFrom] = useState(false);
    const [eventName, setEventName] = useState("");
    const [eventList, setEventList] = useState([]);
    console.log(eventList);
    
    //Submit function
    const submitHandle = (e) => {
      e.preventDefault();

      if(!eventName) {
          alert("Please Enter a name for Your Event")
      }
      else {
        const newEvent = {id : new Date().getTime().toString(), title: eventName}
        setEventList(newEvent);
        setEventName("");
      }
    };

    //Show Event Function
    const handleEvent = () => {
      showEventFrom(!eventForm)
    }

    console.log();
    
    return (
        <>
      <table className="table-calendar" >
        <tr>
        <th colspan="7">January</th>
        </tr>

        <tr>
        <th>S</th>
        <th>M</th>
        <th>T</th>
        <th>W</th>
        <th>T</th>
        <th>F</th>
        <th>S</th>
        </tr>

        <tr>
        <Day day="1" onClick={handleEvent}/>
        <Day day="2" onClick={handleEvent}/>
        <Day day="3" onClick={handleEvent}/>
        <Day day="4" onClick={handleEvent}/>
        <Day day="5" onClick={handleEvent}/>
        <Day day="6" onClick={handleEvent}/>
        <Day day="7" onClick={handleEvent}/>
        </tr>

        <tr>
        <Day day="8" onClick={handleEvent}/>
        <Day day="9" onClick={handleEvent}/>
        <Day day="10" onClick={handleEvent}/>
        <Day day="11" onClick={handleEvent}/>
        <Day day="12" onClick={handleEvent}/>
        <Day day="13" onClick={handleEvent}/>
        <Day day="14" onClick={handleEvent}/>
        </tr>
      </table>

      {eventForm ? (<form className="event-form" onSubmit={submitHandle}>
          <h3>Create an event</h3>
          <input type="text" 
                 placeholder="Event Name" 
                 className="event-name" 
                 value={eventName}
                 onChange={(e)=> setEventName(e.target.value)}/>

           <div className="btn-container">
            <button type="submit"
                    className="btn">Submit</button>
            <button className="btn">Delete</button>
           </div>
      </form>) : ""}
      
      <Event listEvent={eventList}/>
    </>
    )
}

export default Calendar;

事件组件

import React from 'react'

const Event = ({listEvent}) => {
    const {id, title} = listEvent;
    return (
       <div className="event-pop-up" key={id}>
           <h1>Event : {title}</h1>
       </div>
    )
}

export default Event

你怎么看？有什么建议或解决方案吗？

Answer 1

您应该将日期与事件名称一起存储在事件列表数组中。

下次检查是否在所选数据上创建了任何事件，如果没有事件，则仅显示表单，如果事件已经存在，则显示表单和列表。