我将React与DataTable组件一起使用。这是图书馆：https://www.npmjs.com/package/react-data-table-component#conditional-样式对象
这是我的数据表组件：
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>
</>
);
};在组件：数据表中，我有：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>
);
}有人能帮帮我吗？ps：对不起我的英语，我不会说英语，我使用谷歌tradutor寻求帮助。
在数据表组件的返回中添加模态。在你的数据表组件上也添加这些：
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
然后你可以做：
onRowClicked={(row) => setModal(true)}
您可能还应该使用状态挂钩来存储当前选择的设备。并从中读取模态。