在复选框单击时禁用选择（下拉）（React JS 和 Material UI）

Question

我有一个 React JS 应用程序，我正在使用 Material UI。 我有如下网格

我的要求是当我点击一个复选框时，只有特定行的选择应该被启用。我尝试过禁用属性和 document.getElementById 但没有运气。

选择的 HTML 代码

<FormControl name="selectDdl" id={`selectHr${index}`}  variant="outlined" className='selectLayout' >
            <Select id={`selectHrs${index}`}  disabled={isSelectDisabled} name = {`selectHrs${index}`} >
            {optionItemsHours}
            </Select>

启用下拉菜单的代码

const chkDays = (event) => {
  
 var selectHr = document.getElementById("selectHr0");
 selectHr.disabled = false;
 document.getElementById("selectHr0").children[0].classList.remove("Mui-disabled");
// setisSelectDisabled(false); -- this disable all dropdown of page
}

Answer 1

当您使用 react 时，直接修改 dom 并不好。我在这里创建了一个小例子 - https://codesandbox.io/s/sad-microservice-l5m6k

您可以根据需要进行修改。