Javascript 显示可折叠文件中的组件

您好，我正在尝试在一个“antd”可折叠文件中显示一个表单组件，当用户单击表单图标时，表单组件应该显示在已存在的文本下方的可折叠文件中

我正在使用antd库来创建可折叠文件

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Collapse, Icon } from 'antd';
import Form from './Form';

const { Panel } = Collapse;

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

const genExtra = () => (
  <Icon
    type="form"
    onClick={event => {
      // If you don't want click extra trigger collapse, you can prevent this:
      event.stopPropagation();

      console.log('You have click on edit form');
    }}
  />
);

const customPanelStyle = {
  background: '#f7f7f7',
  borderRadius: 4,
  marginBottom: 24,
  border: 0,
  overflow: 'hidden',
};

ReactDOM.render(
  <Collapse
    bordered={false}
    defaultActiveKey={['1']}
    expandIcon={({ isActive }) => <Icon type="caret-right" rotate={isActive ? 90 : 0} />}
  >
    <Panel 
      header="This is panel header 1" 
      key="1" style={customPanelStyle}
      extra={genExtra()}
    >
      <p>{text}</p>
    </Panel>
  </Collapse>,
  document.getElementById('container'),
);

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
从“antd”导入{Collapse，Icon}；
从“./Form”导入表单；
const{Panel}=崩溃；
常量文本=`
狗是一种家养动物。
以忠诚和忠诚著称，
在世界各地的许多家庭中，它都是受欢迎的客人。
`;
常量genExtra=（）=>(
{
//如果不希望单击额外触发器折叠，可以防止此情况：
event.stopPropagation（）；
log（'您已单击编辑表单'）；
}}
/>
);
常量customPanelStyle={
背景：“#f7f7f7”，
边界半径：4，
marginBottom:24，
边界：0，
溢出：“隐藏”，
};
ReactDOM.render(
}
>
{text}

,
document.getElementById（'container'），
);

这是表单组件：

import React from 'react';

const Form = () => {
  return(
    <div id="wrapper">
      <div className="group">
        <label for="name">Name</label>
        <input type="text" id="name" />
      </div>
      <hr/>
      <div className="group">
        <label for="email">Email</label>
        <input type="email" id="email" />
      </div>
    </div>
  );
}

export default Form;

从“React”导入React；
常数形式=（）=>{
返回(
名称

电子邮件
);
}
导出默认表单；

--

---

我只希望当用户单击标题中的小图标时，表单组件出现在可折叠的内部。我将留下一个指向stackblitz的链接：

您需要将

可折叠的

移动到另一个基于类的组件，在那里您可以有状态来显示/隐藏

表单组件

在新构造的基于类的组件中，您需要维护如下状态：

constructor(props){
    super(props);
    this.state ={
      showForm: false
    }
}

然后在渲染中，您可以像这样显示您的
表单

<Panel 
      header="This is panel header 1" 
      key="1" style={customPanelStyle}
      extra={this.genExtra()}
>
      <p>{text}</p>
      {this.state.showForm && <Form />}
</Panel>

注意：在
表单
组件中，您的
标签会收到警告

<label htmlFor="name">Name</label> //instead of `for` attribute in react we have `htmlFor` attribute.

Name//react中的'for'属性改为'htmlFor'属性。


<label htmlFor="name">Name</label> //instead of `for` attribute in react we have `htmlFor` attribute.