Показать компонент внутри складного - PullRequest
Новая
       8

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

0 голосов
/ 08 июля 2019

Здравствуйте. Я пытаюсь показать Компонент Формы внутри Разборного элемента 'antd', когда пользователь нажимает на значок формы. Компонент Формы должен появиться внутри Разборного элемента под уже существующим текстом

Яс помощью библиотеки antd для Collapsible 

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'),
);

это компонент формы: 

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;

- я просто хочу, чтобы компонент Form отображался внутри свертки, когда пользователь нажимает намаленькую иконку в шапке оставлю ссылку на стек стлиц: https://stackblitz.com/edit/react-pkffgm

1 Ответ

1 голос
/ 08 июля 2019

Вам необходимо переместить 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.log('You have click on edit form');
    }}
  />
);

Примечание: В компоненте Form вы получаете предупреждение за lable, 

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

Демо

...