如何在反应JS中单击按钮打开表单

Question

function openForm() {
    document.getElementById("myForm").style.display = "block";
}

function closeForm() {
    document.getElementById("myForm").style.display = "none";
}
    
<button class="openButton" onclick={openForm} style={openButton}>AI Chat</button>                
<button type="button" class="btn cancel" onclick={closeForm}>Close</button>

I am trying to open a form by onclick event in react, but it's not opening, I am new to react. here attaching what the code..this is working fine with. document.getElementById("myForm").style.display = "block"; As by default chat window is none,we need to add STYLE display = block when using react,but am nit getting how to add.

const [open, setIsOpen] = useState(false);
  const openForm = () => 
  {
    setIsOpen(true);
  };
<Button variant="primary" onClick={openForm} style={openButton} >IRB Chat</Button>  
      <form open={open}>
    <div class="chatPopup" id= "myForms" style={chatPopup}>
      <div class="formContainer" style={formContainer}>
        <span class="title1" style={title1}>IRB Chat</span>
        <label for="msg"><b>Message</b></label>                                         
       <iframe customFrameSection  style={customFrameSection} frameborder="1" id="AIChat" style={{border:'1px solid rgba(0,255,0,0.3)',width: "285px",height: "400px"}}></iframe>
       <button type="button" class="btn cancel" onclick={closeForm} style={cancelButton}>Close</button>
      </div>      
  </div>
      </form>

CSS:- const chatPopup = { display: "none", position: "fixed", bottom: "75px", right: "15px", border: '3px solid #F1F1F1', zIndex:9 };

Answer 1

To do this with React, the best way is using State. If you do this with vanilla javascript, you don't need React.

example with React and useState:

const [open, setIsOpen] = React.useState(false);

const openForm = () => setIsOpen(true);

<button onClick={openForm}> click me! </button>
<Form open={open}/>

hope helpfull =)

Answer 2

const [open, setIsOpen] = useState(false);
  const openForm = () => setIsOpen(true);
    <button class="openButton"  onClick={() => {openForm}} style={openButton}>Chat</button>        
        <div class="chatPopup" id="myForm"  style={chatPopup}>
        <Form open={open}/>
          <div class="formContainer" style={formContainer}>
            <span class="title1" style={title1}>Chat</span>
            <label for="msg"><b>Message</b></label>                                         
           <iframe customFrameSection  style={customFrameSection} frameborder="1" id="AIChat" style={{border:'1px solid rgba(0,255,0,0.3)',width: "285px",height: "400px"}}></iframe>
           <button type="button" class="btn cancel" onclick={closeForm} style={cancelButton}>Close</button>
          </div>
          </div>