React，Material UI，如何根据状态2切换按钮禁用按钮

Question

任务：默认情况下，按钮是关闭的，如何让它只有在开关 btn 改变了它的状态时才打开，这在 props 中，或者更确切地说是对它的正确检查。 我认为验证应该在 handleChangeState 中进行。

const CustomSwitch = ({name, checked, handleChange}) => {
    const [state, setState] = useState(checked);

    const handleChangeState = (event) => {
        setState(!state)
        handleChange(event)
    }

    return (
        <Switch
        required
        checked={state}
        onChange={handleChangeState}
        name={name}
        color="primary"
    />
    )
}

const CustomSaveButton = ({ notifyByEmail,  notifyBySite, notificationType}) => {
    const [isButtonSend, setIsButtonSend] = useState(true);

    const [state, setState] = React.useState({
        email: notifyByEmail,
        site: notifyBySite,
    });

    const handleChange = (event) => {
        setState({ ...state, [event.target.name]: event.target.checked });
        //validate here
    }

    return (
        <>
            <TableCell  align="center">
                <CustomSwitch name="site" handleChange={handleChange} checked={notifyBySite} setIsButtonSend={setIsButtonSend}/>
            </TableCell>
            <TableCell  align="center">
                <CustomSwitch name="email" handleChange={handleChange} checked={notifyByEmail} setIsButtonSend={setIsButtonSend}/>
            </TableCell>
            <TableCell align="center">
                <SaveButton
                    variant="text"
                    disabled={isButtonSend}
                    onClick={save}
   
                />
            </TableCell>

        </>
    )
}

Answer 1

您可以利用 useEffect 和 state 作为依赖项

const [state, setState] = React.useState({
  email: notifyByEmail,
  site: notifyBySite
});

React.useEffect(() => {
  setIsButtonSend(!(state.email && state.site));
}, [state]);