禁用下一个按钮，直到选中复选框答案

【问题标题】：Disable Next Button Until Checkbox Selected禁用下一个按钮，直到选中复选框
【发布时间】：2021-08-02 20:07:29
【问题描述】：

使用带有复选框的 Material UI 数据网格，基本上我需要在至少选中一项后启用“下一步”按钮。我一直将按钮的默认状态设置为禁用，但我一直不知道如何在至少选择一行（复选框）时启用按钮。

【问题讨论】：

嗨！你能分享你的代码，让我帮你吗？

【解决方案1】：

根据文档，您可以将 Controlled Selection 用于 Material UI 的数据网格。通过这种方法，您可以在您的（父）组件中维护一个state，并通过DataGrid 的onSelectionModelChange 属性对其进行更新。因此，您可以检查 state(array) 是否有任何长度并相应地禁用/启用按钮。

import * as React from 'react';
import { DataGrid } from '@material-ui/data-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator';

export default function ControlledSelectionGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 6,
  });

  const [selectionModel, setSelectionModel] = React.useState([]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        checkboxSelection
        onSelectionModelChange={(newSelectionModel) => {
          setSelectionModel(newSelectionModel);
        }}
        selectionModel={selectionModel}
        {...data}
      />
    </div>
  );
}

请记住通过selectionModel 属性将状态传递给DataGrid。我附上了一个带有 Button 的 CodeSandbox 示例。

沙盒 - https://codesandbox.io/s/stoic-sea-riwmx?file=/src/App.js

【讨论】：

@shadimahfouz 如果有效，请接受（勾选）答案。
我做了，但它不会显示我的投票，因为我还是新手。它说我的反应已经被记录下来了。再次感谢您！
@shadimahfouz 不，我没有要求投票。我的答案旁边有一个勾号。正如您所说，这有效，然后单击对勾将我的答案标记为已接受。
我刚刚注意到，对不起，我打勾了。