我如何在React中获得onClick元素的值并将其用作条件

Question

我是react的初学者，我有一个月的日历，我使用<table></table/>标签创建，我正在研究的概念是当我点击一个随机的日子，我想创建一个事件并提交它，但如果已经有一个事件在这一天，我想显示事件的概述，已创建在这一天(如谷歌日历)。

我已经创建了一个函数handlerClick来切换表单以创建事件，也创建了一个函数来提交事件。但是我不知道如何编写逻辑，赋予用户在日历的特定日期只创建一个事件的权利，或者如果有一个事件，我想显示该存在事件的概述。

<——My>

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

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([... eventList, newEvent]);
setEventName("");
}
};
//Show Event Function
const handleEvent = () => {
showEventFrom(!eventForm)
}

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>
<tr>
<Day day="15" onClick={handleEvent}/>
<Day day="16" onClick={handleEvent}/>
<Day day="17" onClick={handleEvent}/>
<Day day="18" onClick={handleEvent}/>
<Day day="19" onClick={handleEvent}/>
<Day day="20" onClick={handleEvent}/>
<Day day="21" onClick={handleEvent}/>
</tr>
<tr>
<Day day="22" onClick={handleEvent}/>
<Day day="23" onClick={handleEvent}/>
<Day day="24" onClick={handleEvent}/>
<Day day="25" onClick={handleEvent}/>
<Day day="26" onClick={handleEvent}/>
<Day day="27" onClick={handleEvent}/>
<Day day="28" onClick={handleEvent}/>
</tr>
<tr>
<Day day="29" onClick={handleEvent}/>
<Day day="30" onClick={handleEvent}/>
<Day day="31" 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>) : ""}
</>
)
}
export default Calendar;

<—My>

import React from 'react'
const Day = ({day, onClick}) => {
return (
<>
<td onClick={onClick}>{day}</td>    
</>
)
}
export default Day

Answer 1

OnClick函数发送关于它在默认情况下作为您选择的函数的参数使用的组件的信息，在这种情况下是getData。
因此，您可以使用箭头函数访问该函数参数，如下所示:

import React from 'react'
getData = (e) => {
// find data you need
console.log(e);
}
const Day = ({day, onClick}) => {
return (
<>
<td onClick={((e) => this.getData(e))}>{day}</td>    
</>
)
}
export default Day