当单击表中的一行时，我需要打开一个模式，但是如何打开呢？

Question

我将React与DataTable组件一起使用。这是库：https://www.npmjs.com/package/react-data-table-component#conditional-style-object

下面是我的数据表组件：

​

import React, { useState, useEffect } from "react";
import EquipmentService from './EquipmentService';
import DataTable, { createTheme } from 'react-data-table-component';
import DataTableExtensions from "react-data-table-component-extensions";
import "react-data-table-component-extensions/dist/index.css";
import Downshift from 'downshift';
import { useCombobox } from 'downshift'

//Pacotes de import para os botoes de filtrar tabelas
import { purple } from '@material-ui/core/colors';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';
import { withStyles } from '@material-ui/core/styles';

// reactstrap
import {
  Card,
  CardHeader,
  Container,
  Row,
} from "reactstrap";

import Header from "components/Headers/Headerfor.js";
import EditEquipment from "./EditEquipment";
import DeleteEquipment from "./DeleteEquipment";
import CreateEquipment from "./CreateEquipment";

const items = ['apple', 'pear', 'orange', 'grape', 'banana']

function ListEquipments() {


  const [equipment, setEquipment] = useState([]);

  useEffect(() => {

    EquipmentService.getEquipment().then(res => setEquipment(res.data));

  }, []);

  //Estilo dos botoes de filtrar colunas
  const PurpleSwitch = withStyles({
    switchBase: {
      color: purple[300],
      '&$checked': {
        color: purple[500],
      },
      '&$checked + $track': {
        backgroundColor: purple[500],
      },
    },
    checked: {},
    track: {},
  })(Switch);

  const [state, setState] = React.useState({
    ID: false,
    Denominação: false,
    Fabricante: false,
  });

  const handleChange = (event) => {
    setState({ ...state, [event.target.name]: event.target.checked });
  };
  // FIM dos botoes

// tema da tabela, preciso colocar em outline para aplicar a todas.
const customStyles = {
  rows: {
    style: {
      backgroundColor: '',
    }
  },
  headCells: { //titulo da tabela.
    style: {
      paddingLeft: '8px', // override the cell padding for head cells
      paddingRight: '8px',
      backgroundColor: '#f6f9fc',
      border: '1px solid #e5e5e5',
    },
  },
  cells: {
    style: {
      paddingLeft: '8px', // override the cell padding for data cells
      paddingRight: '8px',
      borderLeft: '1px solid #e5e5e5',
    },
  },
};

  const columns = [
    /* {
      name: 'ID',
      selector: 'ID',
      sortable: true,
      omit: state.ID,
    }, */
    {
      name: 'Código',
      selector: 'codigo',
      sortable: true,
      grow: -1, //aumentar e diminuir o tamanho da coluna.
      center: true, // centralizar a informação.
    },
    {
      name: "Área",
      selector: "area",
      sortable: true,
      //omit: state.Denominação,
    },
    {
      name: "Setor Instalado",
      selector: "setor",
      sortable: true,
      //omit: state.Denominação,
    },
    {
      name: "Sistema",
      selector: "sistema",
      sortable: true,
      //omit: state.Fabricante,
    },
    {
      name: "Equipamento",
      selector: "denominacao",
      sortable: true,
    },
    {
      name: "Fabricante",
      selector: "fabricante",
      sortable: true,
    },
    {
      name: "Modelo de Equipamento",
      selector: "modelo",
      sortable: true,
    },
  ];

  const TranslateOptions = {
    rowsPerPageText: 'Equipamentos por Página:',
    rangeSeparatorText: 'de',
    selectAllRowsItem: true,
    selectAllRowsText: 'Todos',
  }

  const [inputItems, setInputItems] = useState(items)
  const {
    isOpen,
    getToggleButtonProps,
    getLabelProps,
    getMenuProps,
    getInputProps,
    getComboboxProps,
    highlightedIndex,
    getItemProps,
  } = useCombobox({
    items: inputItems,
    onInputValueChange: ({ inputValue }) => {
      setInputItems(
        items.filter(item =>
          item.toLowerCase().startsWith(inputValue.toLowerCase()),
        ),
      )
    },
  })



  return (
    <>
      <Header />
      {/* Page content */}
      <Container className="mt--7" fluid>
        {/* Table */}
        <Row>
          <div className="col">
            <Card className="shadow">
              <CardHeader className="border-0">
             <h3 className="mb-0">Gestão de Equipamentos</h3>

             {/* <FormGroup>
                <FormControlLabel
                  control={<PurpleSwitch checked={state.ID} onChange={handleChange} name="ID" />}
                  label="ID"
                  />
                  <FormControlLabel
                  control={<PurpleSwitch checked={state.Denominação} onChange={handleChange} name="Denominação" />}
                  label="Denominação"
                  />
                  <FormControlLabel
                  control={<PurpleSwitch checked={state.Fabricante} onChange={handleChange} name="Fabricante" />}
                  label="Fabricante"
                  />
                
             </FormGroup> */}



                <CreateEquipment />
              </CardHeader>
              <DataTableExtensions
                columns={columns}
                filterPlaceholder="Buscar"
                filterHidden={false}
                data={equipment.map((row) => ({
                  codigo: row.descricao,
                  area: row.area,
                  setor: row.setor_instalado,
                  sistema: row.sistema,
                  denominacao: row.denominacao,
                  fabricante: row.fabricante,
                  modelo: row.modelo,
                  //Status: row.status,
                  //Editar: <EditEquipment actual_id={row._id} />,
                  //Apagar: <DeleteEquipment actual_id={row._id} />,
                }))}
              >
                <DataTable
                  noHeader
                  defaultSortField="id"
                  defaultSortAsc={false}
                  pagination
                  striped // sombra sim, sombra não.
                  responsive
                  highlightOnHover
                  onRowClicked={(row) => console.log(row.ID)}
                  //onRowClicked={EditEquipment}
                  customStyles={customStyles}
                  paginationComponentOptions={TranslateOptions}
                />

              </DataTableExtensions>
            </Card>
          </div>
        </Row>
      </Container>
    </>
  );
};

​

在component: Data Table中，我有: onRowClicked={(row) => console.log(row.ID)}

我需要单击一条线，就会出现模式。

这是一个按钮中的模式组件。

​

function EditEquipment(props) {
  const {
    buttonLabel,
    className,
    actual_id,
  } = props;


  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  const [area, setArea] = useState('');
  const [denominacao, setDenominacao] = useState('');
  const [descricao, setDescricao] = useState('');
  const [fabricante, setFabricante] = useState('');
  const [modelo, setModelo] = useState('');
  const [sistema, setSistema] = useState('');
  const [setor_instalado, setSetor_instalado] = useState('');
  

  const handleSubmit = (evt) => {
    evt.preventDefault();


    //alert(`Submitting Name ${firstName} ${lastName}`);
    //resetFirstName();
    //resetLastName();
}

const update = (evt) => {
  let equipments = {area: area, denominacao: denominacao, descricao: descricao, fabricante: fabricante, modelo: modelo, setor_instalado: setor_instalado};
    console.log(equipments)
    EquipmentService.updateEquipment(equipments, actual_id).then(res =>{ //equipment._id no lugar do ID
      console.log(res);
      setModal(!modal);
      //console.log("Etapa 4");
      window.location.reload();
      console.log("Etapa 5");
  }).catch(error => console.log(error.response));

}



  useEffect(() => {
    
    
    async function getEquipment(){
      
      EquipmentService.getEquipmentById(actual_id).then( (res) =>{
        let equipments = res.data;
        setArea(equipments.area); //equipments.tag
        setDenominacao(equipments.denominacao);
        setDescricao(equipments.descricao);
        setFabricante(equipments.fabricante);
        setSistema(equipments.sistema);
        setModelo(equipments.modelo);
        setSetor_instalado(equipments.setor_instalado);
      });
    }
   getEquipment();   

  }, []);



  return (
    <div>     
      
      <Button color="success" size="sm" className="" onClick={toggle}> Editar </Button>
      
      <Modal isOpen={modal} toggle={toggle} size="lg" className="mr-0 mt--1 mb--1">
        <ModalHeader toggle={toggle}>Editar Equipamento </ModalHeader>
        <ModalBody>
        <form onSubmit={handleSubmit}>
                     
                                        <div className = "form-group">
                                        
                                            <label> Área: </label>
                                            <input  name="tag" className="form-control" 
                                               value={area}
                                               onChange={e => setArea(e.target.value)}
                                               
                                               />
                                        </div>
                                        <div className = "form-group">
                                            <label> Setor Instalado: </label>
                                            <input  name="setor_instalado" className="form-control" 
                                                value={setor_instalado}
                                                onChange={e => setSetor_instalado(e.target.value)}
                                                
                                                />
                                        </div>
                                        <div className = "form-group">
                                            <label> Sistema: </label>
                                            <input  name="sistema" className="form-control" 
                                              value={sistema}
                                              onChange={e => setSistema(e.target.value)}
                                              
                                              />
                                              
                                        </div>
                                        <div className = "form-group">
                                            <label> Equipamento: </label>
                                            <input  name="equipamento" className="form-control" 
                                              value={denominacao}
                                              onChange={e => setDenominacao(e.target.value)}
                                              
                                              />
                                              
                                        </div>
                                        
                                        <div className = "form-group">
                                            <label> Código do Equipamento: </label>
                                            <input  name="Código" className="form-control" 
                                              value={descricao}
                                              onChange={e => setDescricao(e.target.value)}
                                              
                                              />
                                        </div>

                                        <div className = "form-group">
                                            <label> Fabricante: </label>
                                            <input  name="setor_instalado" className="form-control" 
                                             value={fabricante}
                                             onChange={e => setFabricante(e.target.value)}
                                             
                                             />
                                        </div>

                                        <div className = "form-group">
                                            <label> Modelo: </label>
                                            <input  name="modelo" className="form-control" 
                                             value={modelo}
                                             onChange={e => setModelo(e.target.value)}
                                             
                                             />
                                        </div>
                      
                                    </form>

                                    <div className = "form-group">
                                          <Card className=" shadow-lg bg-default">
                                            <CardHeader className="">

                                              <Row>
                                                <Col>
                                                <h4> QR Code: </h4>
                                                </Col>
                                                <Col>
                                                </Col>
                                                <Col >
                                                <Button color="default" size="sm" className="ml-9" type="button">
                                                  Imprimir
                                                </Button>
                                                </Col>
                                              </Row>
                                            </CardHeader>
                                            
                                            <CardBody>

                                            <Row>
                                              <Col className="">
                                              <QRCode position="" value="http://www.darwinx.com.br" />
                                              </Col>
                                              <Col className="ml--6 pr-9 text-white">
                                              <label> Número:</label> <br></br>
                                            <label> Equipamento:</label> <br></br>
                                            <label> Descrição:</label>
                                              </Col>
                                              <Col></Col>
                                            </Row>
                                            </CardBody>
                                          </Card>
                                            
                                        </div>
                                        <Button color="success" onClick={update} >Atualizar</Button>{' '}
          <Button color="secondary" onClick={toggle}>Cancelar</Button>
                                    
        </ModalBody>
        <ModalFooter>
          
        </ModalFooter>
      </Modal>
    </div>

  );
}

​

有没有人帮帮我？附言:对不起，我的英语，我不会说英语，我使用谷歌tradutor需要帮助。

Answer 1

在数据表组件的返回中添加模态。还可以在您的数据表组件上添加以下内容：

 const [modal, setModal] = useState(false);

 const toggle = () => setModal(!modal);

然后您可以执行以下操作：

onRowClicked={(row) => setModal(true)}

您可能还应该使用状态挂钩存储当前选定的设备。并从其中读取模式。