React-Material-UI单选按钮组在单击时不会填充按钮

问题描述

我正在使用 Material-UI 组件在 React 中构建应用。在一个窗口中，由单选按钮表示四个正确/错误选择。在渲染时，窗口将按预期渲染，但是单击非默认值只会导致默认单选按钮失去填充，不会填充单击的选项。

示例：如果用户可以将默认值设置为false，则false将在渲染中填充，但是单击true则该选项将不会填充true（尽管false将变为“未填充”。

但是实际状态确实发生了变化。因此，这似乎只是一个渲染问题，而不是状态的根本问题。

这是代码（我将尝试去掉不必要的部分）：

const UpdateDefaultRole = props => {
  const [open,setopen] = React.useState(false);
  const [canMint,setCanMint] = React.useState(false);
  const [canBurn,setCanBurn] = React.useState(false);
  const [payFee,setPayFee] = React.useState(true);
  const [paySplit,setPaySplit] = React.useState(true);

  const handleMintChange = e => setCanMint(e.target.value);
  const handleBurnChange = e => setCanBurn(e.target.value)
  const handleFeeChange = e => setPayFee(e.target.value)
  const handleSplitChange = e => setPaySplit(e.target.value)

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Update Default Role
      </Button>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Update Default Role</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Please enter the new permissions for the default role.<br/> WARNING: Be careful! 
            Improper use of this function is dangerous!
          </DialogContentText>
          <FormControl component="fieldset" style={{padding: "20px",margin: "10px"}}>
            <Formlabel component="legend">User Can Mint Tokens:</Formlabel>
            <RadioGroup aria-label="mint" name="can-mint" value={canMint} onChange={handleMintChange}>
              <FormControlLabel value={true} control={<Radio />} label="True" />
              <FormControlLabel value={false} control={<Radio />} label="False" />
            </RadioGroup>
          </FormControl>
          <FormControl component="fieldset" style={{padding: "20px",margin: "10px"}}>
            <Formlabel component="legend">User Can Burn Tokens:</Formlabel>
            <RadioGroup aria-label="burn" name="can-burn" value={canBurn} onChange={handleBurnChange}>
              <FormControlLabel value={true} control={<Radio />} label="True" />
              <FormControlLabel value={false} control={<Radio />} label="False" />
            </RadioGroup>
          </FormControl>
          <FormControl component="fieldset" style={{padding: "20px",margin: "10px"}}>
            <Formlabel component="legend">User Must Pay Fee:</Formlabel>
            <RadioGroup aria-label="fee" name="pay-fee" value={payFee} onChange={handleFeeChange}>
              <FormControlLabel value={true} control={<Radio />} label="True" />
              <FormControlLabel value={false} control={<Radio />} label="False" />
            </RadioGroup>
          </FormControl>
          <FormControl component="fieldset" style={{padding: "20px",margin: "10px"}}>
            <Formlabel component="legend">User Must Pay Split:</Formlabel>
            <RadioGroup aria-label="split" name="pay-split" value={paySplit} onChange={handleSplitChange}>
              <FormControlLabel value={true} control={<Radio />} label="True" />
              <FormControlLabel value={false} control={<Radio />} label="False" />
            </RadioGroup>
          </FormControl>
          
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={submitUpdateDefaultRole} color="primary">
            Submit
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

我尝试尽可能忠实地遵循Material-UI网站上的代码，但显然我在某个地方搞砸了。

谢谢您抽出宝贵的时间阅读我的问题！

解决方法

可能是string而不是boolean，这导致了问题。试试：

const handleMintChange = e => setCanMint(e.target.value === 'true');