Reactjs 当我改变手风琴内某个形状的值时，手风琴关闭

我有一个手风琴，里面有一个文本表单（代码沙盒：）：

函数移动手风琴（）{
常量[formInput，setFormInput]=useState（“”）
返回(
手风琴头
填写以下表格：
setFormInput（event.target.value）}
type=“text”
占位符=“在此处输入”/>
添加
)
}

我在表单中添加了一个onChange（）函数，以便在任何时候更新表单时都将其推送到状态。但是，任何时候更新表单时，手风琴都会关闭

如果我完全删除onChange（）函数，表单工作正常，我可以随意更新它。每当包含onChange（）时，问题就会出现

在花了比我想承认的更多的时间试图找到解决方法之后，我陷入了困境。

根据您的：-

• 您不应该像调用普通的

  JSX

  功能组件那样调用
  函数。相反，您应该像调用正常的
  函数那样调用它-
  {PrimaryMovementAccordion（）}
  
  

• 如果你想像现在这样打电话，你现在就可以了。那么，只有当

  SecondaryMovementAccordion

  确实是一个

  JSX

  功能组件时，才能实现这一点。因此，您需要创建另一个
  React功能组件
  的
  SecondaryMovementAccordion
  ，就像这样，以使其工作：-
  
  

• 在

  App.js

  中：-

import React，{useState}来自“React”；
导入“bootstrap/dist/css/bootstrap.min.css”；
导入“/styles.css”；
从“react bootstrap/Accordion”导入手风琴；
从“反应引导/卡”导入卡；
从“react引导/表单”导入表单；
从“反应引导/按钮”导入按钮；
从“/SecondaryMovementAccordion”导入SecondaryMovementAccordion；
导出默认函数App（）{
const[newPrimary，setNewPrimary]=useState（“”）；
const[newSecondary，setNewSecondary]=useState（“”）；
返回(
{/*调用普通函数的方法不正确*/}
{/*  */}
{/*调用普通函数的正确方法*/}
{PrimaryMovementAccordion（）}
{/*调用JSX函数组件的正确方法*/}
主要：{newPrimary}

次要：{newSecondary}

);
//初级手风琴手
函数PrimaryMovementAccordion（）{
返回(
如上所示。
您应该创建一个最小的可复制示例（最好是打开）@hgb123 Done:accordion在codesandbox示例中没有关闭
function MovementAccordion() {
  const [formInput, setFormInput] = useState('')

    return(
      <Accordion>
        <Card>
          <Accordion.Toggle
            as={Card.Header}
            eventKey="0">
            Accordian Header
          </Accordion.Toggle>
          <Accordion.Collapse eventKey="0">
            <Card.Body>
              Fill in the form:
              <Form.Control
                onChange={(event) => setFormInput(event.target.value)}
                type="text"
                placeholder="Enter input here" />
              <Button
                variant="primary"
                >
                  Add
              </Button>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    )
  }