按钮 onclick 在 reactJS 中无法使用以下代码

Question

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>

我尝试了多种方法，onclick 应该打开聊天 window，id 为 myform 的聊天弹出窗口将如何打开，缺少在任何地方提供 myform id，请告诉我，这里做错了什么。

Answer 1

您正在向什么都不做的 onClick 侦听器提供匿名函数，要么在那里调用 clickForm 函数，要么在 onClick 中传递它的引用，例如 -

const [open, setIsOpen] = useState(false);
const openForm = () => setIsOpen(true);
<button class="openButton"  onClick={openForm} style={openButton}>Chat</button>

Answer 2

除了将 onClick 更改为 onClick={openForm} 之外，请检查您的 HTML 代码。

 <Form open={open}/>

我没有看到表格中的内容。也许你是这个意思？

<From open={open}>
 <div class="formContainer" style={formContainer}>
    <span class="title1" style={title1}>Chat</span>
    <label for="msg"><b>Message</b></label>                                         
     ....
 </div>      
</Form>

Answer 3

您正在自行关闭表单标签，因此当用户单击 Chat

时不会打开任何内容

将您的表单内容包裹在 form 标记内，错误可能会消失！

按钮 onclick 在 reactJS 中无法使用以下代码

Button onclick does not working in reactJS with below code

forms

buttonclick

reactjs

react-hooks