材料表复选框 [React.js]

如何解决材料表复选框 [React.js]

我已经在选项选择的材料表中有我的复选框：true 我想知道如何在我单击表刷新时使它们工作，这里有人可以帮助我解决这个问题吗？我会很感激

function DataTable() {
const [data,setData] = useState([]);
const columns = [
    { title: 'Data',field: 'hora' },{ title: 'Paciente',field: 'clientName' },{ title: 'Médico Veternário',field: 'vet.name' },{ title: 'Estado',field: 'appointmentState' },];

const tableIcons = {
    DetailPanel: forwardRef((props,ref) => (
        <ChevronRight {...props} ref={ref} />
    )),FirstPage: forwardRef((props,ref) => <FirstPage {...props} ref={ref} />),LastPage: forwardRef((props,ref) => <LastPage {...props} ref={ref} />),NextPage: forwardRef((props,ref) => <ChevronRight {...props} ref={ref} />),PrevIoUsPage: forwardRef((props,ref) => (
        <ChevronLeft {...props} ref={ref} />
    )),};

useEffect(() => {
    fetch('teste.com')
        .then((resp) => resp.json())
        .then((resp) => setData(resp));
});

return (
    <div style={{ height: 400,width: '100%' }}>
        <MaterialTable
            icons={tableIcons}
            title='Lista Consultas'
            data={data}
            columns={columns}
            options={{
                search: false,sorting: true,selection: true,paging: true,pageSize: 5,tableLayout: 'auto',toolbar: false,rowStyle: {
                    backgroundColor: '#FFF',fontSize: '100%',},}}
        />
    </div>
);}export default DataTable;

解决方法

不确定我是否理解正确，但是，如果您想对选定的行执行操作，则可以使用自定义操作执行以下操作：

actions={[
          {
            tooltip: "Custom action on selected rows",icon: "refresh",onClick: (evt,data) => console.log("selected data: ",data)
          }
        ]}

一旦您点击右上角的按钮，您的自定义操作的 onClick 事件就会被触发，将作为 arg (data) 的对象列表传递给该函数，每个对象代表 { {1}} 个选定的行。

请注意，要立即使用此功能，rowData 选项必须为 toolbar（默认值），当然，选项 true 也必须为 {{ 1}}。

工作沙盒 here，您可以查看 docs 以获取更多示例。

希望对你有用！