React 只选择表单的一个单选按钮而不是全部答案

【问题标题】：React select only one radio button of the form instead of allReact 只选择表单的一个单选按钮而不是全部
【发布时间】：2020-03-25 10:41:49
【问题描述】：

我创建了这个表单来生成一个动态反应页面，通过单选按钮选择选项。

在当前实例上，我能够选择所有指示的单选按钮，我希望在这些单选按钮中能够从所有生成的单选按钮中仅选择一个。

<Card className={classes.root} variant="outlined">
  <CardContent>
    <Container component="main" maxWidth="lg">
      <CssBaseline />
      <Grid container spacing={3}>
        <Grid item xs={6} sm={1}></Grid>
        <Grid item xs={12}>
          <FormLabel component="legend">{values.question.text}</FormLabel>
          <FormControl component="fieldset" key={uuid()}>
            <RadioGroup name="groupSingleSelect" key={uuid()}>
              {values.question.items.map(item => (
                <React.Fragment key={uuid()}>
                  <FormControlLabel
                    label={item.name}
                    value="present"
                    control={
                      <Radio
                        id={item.id}
                        name={item.name}
                        checked={setSelectedRadioValue(
                          values.question.items,
                          item.id
                        )}
                        onChange={props.handleSingleRadioChange(item.id)}
                      />
                    }
                  />
                </React.Fragment>
              ))}
            </RadioGroup>
          </FormControl>
        </Grid>
        <Grid item xs={6} sm={9}>
          <Button
            type="submit"
            variant="contained"
            color="primary"
            onClick={continueToNextStep}
          >
            Continue
          </Button>
        </Grid>
      </Grid>
    </Container>
  </CardContent>
</Card>

【问题讨论】：

标签： reactjs material-ui next.js

【解决方案1】：

您可以简单地将当前选择的 id 保存在一个状态中。

const [selectedID, setID] = React.useState('');
return <Card className={classes.root} variant="outlined">
  <CardContent>
    <Container component="main" maxWidth="lg">
      <CssBaseline />
      <Grid container spacing={3}>
        <Grid item xs={6} sm={1}></Grid>
        <Grid item xs={12}>
          <FormLabel component="legend">{values.question.text}</FormLabel>
          <FormControl component="fieldset">
            <RadioGroup name="groupSingleSelect">
              {values.question.items.map(item => (
                  <FormControlLabel
                    label={item.name}
                    key={item.id}
                    value="present"
                    control={
                      <Radio
                        id={item.id}
                        name={item.name}
                        checked={item.id === selectedID}
                        onChange={() => {setID(item.id}}
                      />
                    }
                  />
                </React.Fragment>
              ))}
            </RadioGroup>
          </FormControl>
        </Grid>
        <Grid item xs={6} sm={9}>
          <Button
            type="submit"
            variant="contained"
            color="primary"
            onClick={continueToNextStep}
          >
            Continue
          </Button>
        </Grid>
      </Grid>
    </Container>
  </CardContent>
</Card>

如果你包装多个组件，你也应该只使用 Fragments，你在这里没有这样做，所以你可以删除它。

不要使用 uuid 作为键，你已经有元素的 id，为什么不使用这些。

也可以省略普通字段（不是列表的一部分）的键。

【讨论】：