Здравствуйте, я пытаюсь показать компонент формы внутри складного объекта 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.info('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'),
);
это компонент формы:
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;
-- Я просто хочу, чтобы компонент формы появлялся внутри сворачиваемого, когда пользователь нажимает на маленькую иконку в заголовке. Я оставлю ссылку на stackblitz: https://stackblitz.com/edit/react-pkffgm



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вам нужно переместить свой Collapsible в другой компонент на основе класса, где вы можете иметь состояние для отображения/скрытия вашего компонента Form,
В недавно созданном компоненте на основе класса вам необходимо поддерживать состояние, например,
constructor(props){
super(props);
this.state = {
showForm: false
}
}
Затем в рендере вы можете показать свой Form вот так,
<Panel
header = "This is panel header 1"
key = "1" style = {customPanelStyle}
extra = {this.genExtra()}
>
<p>{text}</p>
{this.state.showForm && <Form />}
</Panel>
И, наконец, при нажатии на значок редактирования формы вам нужно изменить состояние showForm, например,
genExtra = () => (
<Icon
type = "form"
onClick = {event => {
// If you don't want click extra trigger collapse, you can prevent this:
event.stopPropagation();
this.setState({showForm: true})
console.info('You have click on edit form');
}}
/>
);
Примечание: В компоненте Form вы получаете предупреждение о вашем lable,
<label htmlFor = "name">Name</label> //instead of `for` attribute in react we have `htmlFor` attribute.