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

Question

我正在使用 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 网站上的代码，但显然我在某个地方搞砸了。

感谢您花时间阅读我的问题！

Answer 1

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

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