Реактивно выберите только одну радиокнопку формы вместо всех - PullRequest
Новая
       31

Реактивно выберите только одну радиокнопку формы вместо всех

0 голосов
/ 25 марта 2020

Я создал эту форму для создания динамической c реагирующей страницы, опции выбираются с помощью переключателя.

В текущем экземпляре я могу выбрать все указанные переключатели, где я хочу чтобы сделать так, чтобы можно было выбрать только одну радиокнопку из всех сгенерированных. 

<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>

1 Ответ

0 голосов
/ 25 марта 2020

Вы можете просто сохранить текущий выбранный идентификатор в состоянии. 

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>

Вам также следует просто использовать фрагменты, если вы обертываете несколько компонентов, чего вы здесь не делаете, так что вы можете удалить его.

Не используйте uuid для ключей, у вас уже есть идентификатор для элементов, почему бы не использовать их.

И ключи к обычным полям (не являющимся частью списка) также можно опустить.

...