Показать компонент внутри складного

Здравствуйте, я пытаюсь показать компонент формы внутри складного объекта 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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
197
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно переместить свой 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.

Демо

Другие вопросы по теме