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

Question

我正在使用 Material-UI 组件在 React 中构建一个应用程序。在一个 window 中，有四个 true/false 选项，由单选按钮表示。渲染 window 按预期呈现，但单击非默认值只会导致默认单选按钮失去其填充，并且不会填充单击的选项。

示例：如果用户可以铸造默认值 false，则 false 将在渲染时填充，但单击 true 的选项将不会填充 true （尽管 false 将变为 'unfilled'）。

不过，实际状态确实发生了变化。所以这似乎只是一个渲染问题，而不是状态的潜在问题。

代码如下（我会尽量去掉不需要的部分）：

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');

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

React - Material-UI radio button group won't fill button on click

javascript

radio-group

radio-button

reactjs

material-ui