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.