[英]Show react component on click
So I'm creating a website for the receptionists at a doctor's office.所以我正在为医生办公室的接待员创建一个网站。 In order to make a new booking, I have a plus button, and when you click it, I want the makeBooking component to pop up and then there's also a cancel button.为了进行新预订,我有一个加号按钮,当您单击它时,我希望弹出 makeBooking 组件,然后还有一个取消按钮。
Currently, I am struggling to make the component appear onClick.目前,我正在努力让组件出现 onClick。
This is my code:这是我的代码:
This is in the appointments component above return这是在返回上方的约会组件中
// handleBooking
const [showResults, setShowResults] = React.useState(false)
const handleBooking = () => setShowResults(true)
This is in return:这是回报:
<button class='addBtn' id="btn"><div className='plus-icon' onClick={handleBooking}><UilPlus/></div></button>
{ showResults ? <MakeBooking /> : null }
And this is my component:这是我的组成部分:
import React from 'react';
import { UilTimes } from '@iconscout/react-unicons';
const MakeBooking = () => {
return (
<div>
<div className='appointments-form'>
<form id="homeForm">
<button class='closeBtn' id="btn"><div className='close-icon'><UilTimes/></div></button>
<div className='heading'>
<h1>Make booking</h1>
<h3>Let's get this clients pet booked!</h3>
</div>
<div className='new-book-container home'>
<input list="docList" className='booking-input home' type='text' placeholder='doctor'/>
<datalist id="docList">
<option value="Sarah"/>
<option value="Josh"/>
<option value="Daina"/>
<option value="Tanielle"/>
<option value="Tony"/>
</datalist>
<input list="clientList" className='booking-input home' type='text' placeholder='client'/>
<datalist id="clientList">
<option value="Sarah"/>
<option value="Josh"/>
<option value="Daina"/>
<option value="Tanielle"/>
<option value="Tony"/>
</datalist>
<input className='booking-input home' type='date' placeholder='Date'/>
<input className='booking-input home' type='time' placeholder='time'/>
<input className='booking-input home' type='number' placeholder='room'/>
<button className='primary-btn' id='btn'>Book appointment</button>
</div>
</form>
</div>
</div>
);
};
export default MakeBooking;
Try this it will work:试试这个它会起作用:
const [showResults, setShowResults] = React.useState(false)
const handleBooking = event => {setShowResults(true)};
{ showResults && <MakeBooking /> }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.