Question

目前，我正在研究一个评分列表。我用RadioGroup和RadioButtons创建了一个列表。我的问题是我创建了一个ListItem，现在它们脱离了RadioGroup。

我的目标是使无线电组中的单选按钮具有如图所示的相似样式。

外观如何：

谢谢大家，度过一个愉快的周末！

代码：

<List>
  <ListItem>
    <RadioGroup aria-label="Score" name="score" className={classes.groupFlex} value={`${stars}`} onChange={this.handleStars}>


      <ListItem>
        <Radio value={5} classes={{root: classes.root, checked: classes.checked}}/>
        <ListItemIcon>
          <StarIcon/>
          <StarIcon/>
          <StarIcon/>
          <StarIcon/>
          <StarIcon/>
        </ListItemIcon>
      </ListItem>

      <ListItem>
        <Radio value={4} classes={{root: classes.root, checked: classes.checked}}/>
        <ListItemIcon>
          <StarIcon/>
          <StarIcon/>
          <StarIcon/>
          <StarIcon/>
          <StarHalfIcon/>
        </ListItemIcon>
      </ListItem>

      <ListItem>
        <Radio value={3} classes={{root: classes.root, checked: classes.checked}}/>
        <ListItemIcon>
          <StarIcon/>
          <StarIcon/>
          <StarIcon/>
          <StarHalfIcon/>
          <StarHalfIcon/>
        </ListItemIcon>
      </ListItem>

      <ListItem>
        <Radio value={2} classes={{root: classes.root, checked: classes.checked}}/>
        <ListItemIcon>
          <StarIcon/>
          <StarIcon/>
          <StarHalfIcon/>
          <StarHalfIcon/>
          <StarHalfIcon/>
        </ListItemIcon>
      </ListItem>

      <ListItem>
        <Radio value={1} classes={{root: classes.root, checked: classes.checked}}/>
        <ListItemIcon>
          <StarIcon/>
          <StarHalfIcon/>
          <StarHalfIcon/>
          <StarHalfIcon/>
          <StarHalfIcon/>
        </ListItemIcon>
      </ListItem>


    </RadioGroup>
  </ListItem>
</List>

Answer 1

我已经修复了。

默认情况下，如果未选中无线电，则无线电组将分配。但是，因为我的收音机不在收音机组的直接内部，所以不会为收音机组件分配新值。

我添加了选中的参数，并通过以下方式编辑了电台：

<Radio value={5} classes={{root: classes.root, checked: classes.checked}}  checked={this.props.stars === 5} />

材质UI按钮组未将内部按钮分组

1 个答案: