Material ui 单选按钮组在 select 上未更改

Question

我有以下使用 material 作为按钮组的反应组件。

当页面首次呈现时，默认值 5 被 selected 并且单选框显示为 checked。

然而，当我 select 任何其他单选框时，所有单选框都变黑并且没有显示 selected。我已经检查过 setValue 正在被调用并更改值，所以我不明白为什么值更改没有反映在单选框中？

import React, {useState} from 'react';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
import Typography from '@material-ui/core/Typography';

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  root: {
    marginTop: theme.spacing(3)
  },
  amountSelectGroupLabel: {
    '&.MuiFormLabel-root': {
      color: theme.palette.borders.primary
    }
  }
}));

const RadioButtons = (props) => {
  const { radioButton, ...labelProps } = props;
  return (
    <FormControlLabel
      control={<Radio color="secondary" />}
      label={`$${props.value}`}
      labelPlacement="bottom"
      {...labelProps}
    />
  )
}

function SelectTokenAmountToBuyComponent(props) {
  const classes = useStyles();
  const amountRanges = [1, 5, 10, 20, 50, 100];
  const [value, setValue] = useState(5);

  function handleChange(event) {
    const {target: {value: _value}} = event;

    setValue(_value);
  }

  return (
    <FormControl className={classes.root} component="fieldset">
      <FormLabel className={classes.amountSelectGroupLabel} component="legend">
        <Typography gutterBottom variant='subtitle2'>
          Select amount
        </Typography>
        <Typography variant='caption'>
          ( = 100 tokens)
        </Typography>
      </FormLabel>
      <RadioGroup
        row
        name="monetaryValue"
        value={value}
        onChange={handleChange}>
        {
          amountRanges.map((amount, index) => (
            <RadioButtons key={`select-amount-${amount}-tokens-${index}`} value={amount} radioButton/>
          ))
        }
      </RadioGroup>
    </FormControl>
  )
}

export default SelectTokenAmountToBuyComponent;

Answer 1

onChange 事件 returns 值作为字符串类型。然后，您的 setState 会触发重新渲染并将该值分配给 RadioGroup。它此时停止工作，因为 RadioGroup 有，例如，value={"10"}，而相应的 RadioButtons 有 value={10}

Material ui 单选按钮组在 select 上未更改

Material ui radio button group not changing on select

radio-group

reactjs

material-ui