Crie um Componente Modal personalizado no React.

Chisom Okoye Blocked Unblock Seguir Seguindo 9 de julho imagem da pesquisa do google

Os modais são um dos componentes mais importantes dos elementos da interface do usuário na web. eles fornecem uma base sólida para criar diálogos, popover etc.

Neste artigo, vamos ver como construir nosso próprio componente modal de reação. Aqui está o instantâneo de como será o nosso componente modal.

reagir componente modal de um projeto existente (Assetify)

Pré-requisitos

Antes de começar, você precisa garantir que tenha a instalação do Nó na sua máquina, e o gerenciador de pacotes npm, porque nós iremos usá-lo para o gerenciamento de pacotes, você pode decidir usar o fio para o mesmo propósito. Vamos criar o código clichê para nosso aplicativo React usando o pacote de linha de comando create-react-app . Você também precisa garantir que esteja instalado globalmente em sua máquina. Se você estiver usando npm >= 5.2 , talvez não seja necessário instalar o create-react-app como uma dependência global, já que podemos usar o comando npx .

Começando

criar nova aplicação Reagir:

Inicie um novo aplicativo React usando o seguinte comando. Você pode nomear o aplicativo como quiser. create-react-app react-modal-app

O andaime do projeto vem com algumas dependências para rodar nosso projeto com o comando npm start e então nosso projeto pode então ser visualizado na porta localhost 3000 por padrão.

O componente modal

Em nossa pasta “src” existe uma pasta de componentes e containers, a pasta de componentes é onde todo o nosso componente reutilizável estará enquanto nossa pasta container contém nosso componente de classe principal, então no diretório de componentes nós criamos uma pasta para o componente modal. Em seguida, crie dois arquivos neste diretório src / components / modal nosso arquivo e estilo do componente reagir.

src / components / modal / index.js

 import React, {Component} from "react"; 
 import {ModalWrapper, ModalBoxSetup, ModalBg} de "../GeneralStyle"; 
 importar propTypes de "prop-types"; 
 / * 
 visível: booleano 
 dismiss: function ao clicar em Close. 
 * / 
 classe padrão de exportação ModalSetup estende o componente { 
 static propTypes = { 
 visible: PropTypes.bool.isRequired, 
 demissão: PropTypes.func.isRequired 
 }; 
 render () { 
 const {visible, dismiss, filhos, cliente} = this.props; 
 Retorna ( 
 <React.Fragment> 
 {visível ? ( 
 <ModalWrapper> 
 <ModalBoxSetup width = {client}> {filhos} </ ModalBoxSetup> 
 <ModalBg onClick = {dismiss} /> 
 </ ModalWrapper> 
 ) : nulo} 
 </ Refresh.fragment> 
 ); 
 } 
 } 

NB: Estou usando um componente com estilo para estilizar o componente modal que é o “generalStyle.js”

 importar estilo de "componentes de estilo"; 
import {color} de "../color";
 exportar o ModalWrapper = styled.div` 
 posição: fixa; 
top: 0;
esquerda: 0;
fundo: 0;
índice z: 1050;
exibição: flex;
alinhar itens: linha de base;
 `; 
 export const ModalBoxSetup = styled.div` 
 posição: absoluta; 
esquerda: 0;
direita: 0;
width: $ {props => props.width || "32%"}
estouro: oculto;
preenchimento: 16px;
margem: 50px auto;
dimensionamento de caixa: caixa de borda;
z-index: 1;
box-shadow: 0px 4px 8px rgba (0, 0, 0, 0,04);
plano de fundo: $ {color.white};
borda: 0.5px sólido # E8E8E8;
 `; 
 exportar const ModalBg = styled.div` 
 largura: 100vw; 
altura: 100vh;
z-index: 0;
fundo: rgba (0, 0, 0, 0,5);

Explicação do componente modal

O componente modal que construímos acima é aceitar quatro suportes que são visíveis, dispensar, cliente e filhos. visível é o que faz o componente mostrar ou ocultar, dispensar adereços ajuda a esconder a visibilidade do modal, adereços de crianças é o conteúdo exclusivo do modal enquanto adereços do cliente é usado para o nosso estilo para determinar a largura do nosso modal tornando-o responsivo.

Uso Modal

Agora precisamos incorporar nosso componente modal na visualização do painel, como visto em nosso instantâneo inicial.

 import React, {Component} from 'react'; 
 // o componente modal personalizado 
import ModalSetup de "../../components/Modal/ModalSetup";
 // conteúdo modal para o novo trabalho 
import AddNewJob de "./_partials/addNewJob";
 classe Dashboard estende o componente { 

estado = {isModalOpen: false}
 handleModalOpen = () => { 
isModalOpen:! this.state.isModalOpen
}
 demissível = () => { 
this.setState ({
isModalOpen: false})
}
 render () { 
const {isModalOpen} = this.state;
deixe as crianças;
 if (isModalOpen) { 
crianças = (
<AddNewJob />
 ); 
}
 Retorna ( 
<div>
<button onClick = {this.handleModalOpen}> Novo trabalho </ button>
 <ModalSetup 
visible = {isModalOpen}
dismiss = {this.dissmissable}
children = {children}
/>
 </ div> 
 ); 
}
 } 

Conteúdo modal

Nosso componente AddNewJob é um subcomponente que é a grade de formulário que podemos ver no instantâneo modal quando aberto

 Retorna ( 
 <div> 
<h2> Criar novo emprego </ h2>
<p id = ”login-title”> Todos os campos são necessários para criar um trabalho </ p>
 <Form> 
<div className = "linha do contêiner modal">
Estilo <div id = "select-wrapper" = {{marginBottom: "16px"}
<Selecionar
style = {{
largura: "100%",
altura: "48px",
fundo: “rgba (107,126,172,0.05)”,
preenchimento: "10px",
borda: "nenhum",
fontSize: “14px”}}
 nome = "cliente" 

onChange = {e => this.getSelectedClient (e)}>
<OptionsStyle value = ”” disabled selected> Select Client
</ OptionsStyle>
{clientContent}

</ Select>
</ div>
 ..... 
.....
....
 <div className = "linha do contêiner modal"> 
 <InputPassword type = "number" placeholder = "Número de ativos esperado" name = "ExpectedAssetCount" onChange = {this.props.handleChange} estilo = {{border: "nenhum", largura: "195px"}} /> 
 <div id = "select-wrapper"> 
<Selecione o estilo = {{width: "100%", altura: "48px", plano de fundo: "rgba (107,126,172,0.05)", preenchimento: "10px", borda: "nenhum", marginBottom: "16px", fontSize: "14px"}}
name = "site" onChange = {e => this.getSelectedQA (e)}>

<OptionsStyle value = "" disabled selected> Atribuir pessoal de QA
</ OptionsStyle>
 {QAdata} 
</ Select>
</ div>
 </ div> 
 <ButtonSetup onClick = {this.handleNewJob} width = "100%"> Criar trabalho 
</ ButtonSetup>
</ Form>
</ div>

Conclusão

Se seguido o procedimento vividamente, podemos usar o mesmo componente modal em outro projeto, independentemente do conteúdo modal e tamanho. Parabéns, você acabou de criar seu primeiro componente reutilizável para reagir.