受控禁用按钮 Material UI - React JS

Question

我有一个简短的问题。我正在尝试有条件地禁用按钮。基本上，如果从我的表中选择了某些东西，那么我允许该按钮可用，否则它被禁用。我知道 MUI 需要一个布尔值才能禁用或启用按钮，因此我正在从我的数组中执行 forEach 循环并获取 selected 的值。但是，即使我有 selected 的值，似乎也没有任何反应。任何想法我做错了什么？ 我的数组：

data: [{
 ....
 selected : true / false
 ....
}]

我的按钮：

 <Tooltip title='Download'>
        <Button
            className={classes.root}
            key='DownloadAll'
            disabled={data.forEach(element => element.selected)}
            color='primary'
            onClick={(event) => buttonOnClick()}
        >
            <SvgIcon
                component={faDownload}
            />
        </Button>
    </Tooltip>

Answer 1

如果您需要返回布尔值，只需使用Array.prototype.some()：

下面是一个快速的现场演示，可以看到这种方法的实际效果：

const { useState } = React,
      { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const App = () => {
  const [tableData, setTableData] = useState([
          {id:0, content: 'row1', selected: false},
          {id:1, content: 'row2', selected: false},
          {id:2, content: 'row3', selected: false}
        ]),
        onSelect = _id => {
          const tableDataShallowCopy = [...tableData],
                targetRowIdx = tableDataShallowCopy.findIndex(({id}) => id == _id)
          if(targetRowIdx>-1){
            tableDataShallowCopy.splice(targetRowIdx,1, {
              ...tableData[targetRowIdx],
              selected: !tableData[targetRowIdx].selected
            })
            setTableData(tableDataShallowCopy)
          }
        }
  return (
    <div>
      <table>
        <thead>
          <tr><th>Header</th></tr>
        </thead>
        <tbody>
          {
            tableData.map(({id,content,selected}) => (
              <tr 
                onClick={() => onSelect(id)}
                className={selected ? 'selected' : ''}
                key={id}
              >
                <td>
                  {content}
                  <input 
                    type="checkbox"
                    value={id}
                    checked={selected}
                  />
                </td>
              </tr>
            ))
          }
        </tbody>
      </table>
      <button disabled={!tableData.some(({selected}) => selected)}>Button</button>
    </div>
  )        
}  

render(
  <App />,
  rootNode
)

.selected {
  background-color: orange;
  color: #fff;
}

tr {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

Answer 2

您可能希望创建一个由“如果从您的表中选择某些内容”操作设置的本地状态，然后使用状态值来切换您的按钮禁用状态。