单击 Formik Field 单选按钮并更新值，但未将单选按钮显示为已选中

Question

我一直在使用 React 和 Formik 开发带有多个单选按钮的测验应用程序。我不希望单选按钮具有 defaultChecked 属性。表单提交按照我想要的方式工作，每个单选按钮的值都显示在警报中。但是单选按钮在浏览器中没有显示为选中状态。

import React, { useState } from 'react';
import { Formik, Form, Field } from 'formik';
import {
  Button,
  ButtonGroup,
  Col,
  Container,
  FormGroup,
  Input,
  Label,
  Row,
} from 'reactstrap';
import { Questions, initialValues } from './dummy';
import ModalConfirm from './ModalConfirm';
import './FormQuiz.css';
import ButtonGrid from './ButtonGrid';

function FormQuiz() {
  const [isOpen, setIsOpen] = useState(false);
  const [confirm, setConfirm] = useState(false);

  const [step, setStep] = useState(1);
  const [questions, setQuestions] = useState(Questions);

  const toggle = (e) => setIsOpen(!isOpen);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!confirm) {
      toggle();
    }
  };

  return (
    <Container className='mt-5'>
      <Row className='mx-2'>
        <Col md={{ size: '6' }} className='m-auto'>
          
          <Formik
            initialValues={initialValues}
            onSubmit={async (values) => {
              await new Promise((r) => setTimeout(r, 500));
              alert(JSON.stringify(values, null, 2));
            }}
          >
            {({ values }) => (
              <Form>
                <div role='group' aria-labelledby='my-radio-group'>
                  {questions.map((question, questionIndex) => (
                    <div
                      key={questionIndex}
                      hidden={questionIndex + 1 === step ? false : true}
                    >
                      <h5 className='pl-0 my-5'>
                        {questionIndex + 1}
                        {'. '}
                        {question.questionText}
                      </h5>
                      {question.options.map((option, optionIndex) => (
                        <FormGroup
                          key={optionIndex}
                          role='group'
                          className='row'
                        >
                          <Field
                            className='form-control-sm'
                            type='radio'
                            id={`q${questionIndex + 1}o${optionIndex + 1}`}
                            name={`option${questionIndex + 1}`}
                            value={optionIndex + 1}
                          />
                          <Label
                            htmlFor={`q${questionIndex + 1}o${optionIndex + 1}`}
                          >
                            {option}
                          </Label>
                        </FormGroup>
                      ))}
                      <div>{values[`option${questionIndex + 1}`]}</div>
                    </div>
                  ))}
                </div>
                <Button
                  color='info'
                  disabled={step === 1 ? true : false}
                  onClick={(e) => setStep(step - 1)}
                  className='mr-1'
                >
                  Previous
                </Button>
                <Button
                  color='primary'
                  disabled={step === questions.length ? true : false}
                  onClick={(e) => setStep(step + 1)}
                  className='mr-1'
                >
                  Next
                </Button>

                <Button color='warning' type='submit'>
                  Submit
                </Button>
              </Form>
            )}
          </Formik>
        </Col>
      </Row>
    </Container>
  );
}

export default FormQuiz;

这是硬编码的问题和初始值dummy.js

export const Questions = [
  {
    questionText: 'HTML?',
    options: [
      'Hyper Tech Machine Learning',
      'How To Mitigate Linda',
      'How To Master Linguistics',
      'Hyper Text Markup Language',
    ],
    correctOption: 4,
  },
  {
    questionText: 'NodeJS invented by',
    options: ['Carls Linus', 'Ryan Dahl', 'Siraj Raval', 'Bill Gates'],
    correctOption: 2,
  }
];

let values = {};
Questions.forEach((question, index) => {
  values[`option${index + 1}`] = '';
});
export let initialValues = values;

请帮我解决这个问题。如果有任何更好的方法来实现这一点，请告诉我。

Answer 1

这样使用：第一个错误：对无线电输入使用相同的名称第二个错误：在显示选中时传递 checked 属性

<Field
          name="gender"
          render={({ field }) => (
            <>
              <div className="radio-item">
                <input
                  {...field}
                  id="male"
                  value="male"
                  checked={field.value === 'male'}
                  name="type"
                  type="radio"
                />
                <label htmlFor="male">Male</label>
              </div>

              <div className="radio-item">
                <input
                  {...field}
                  id="female"
                  value="female"
                  name="type"
                  checked={field.value === 'female'}
                  type="radio"
                />
                <label htmlFor="female">Female</label>
              </div>
            </>
          )}
        />

Answer 2

我自己也遇到过这个问题，我可以告诉你，这个问题可能是由于你的 JSX <Field /> 标签的 value 属性是数字类型，而不是字符串（是的，我知道这可能是设计使然，但请耐心等待...）。

如果您将 value 属性的值更改为数字的字符串表示形式，UI 应该会更新并显示已选中的单选按钮。

操作代码：

<Field
  className='form-control-sm'
  type='radio'
  id={`q${questionIndex + 1}o${optionIndex + 1}`}
  name={`option${questionIndex + 1}`}
  // TODO: value attribute should be the string representation of the numerical value
  value={optionIndex + 1} 
/>

我使用了 Yup for schema validation (as recommended by the Formik documentation on validation) 并且这仍然通过了对可为空的必需数字的验证：

Yup.number().required('Required').nullable()

如果您对使用 Yup 进行模式验证感兴趣，看起来 Yup 只是获取值，并尝试将其解析为数字。如果该值无法解析为数字，Yup 将提供一条 NaN 错误消息并且该值将无法通过验证。

当心，但是因为这个是显然作为字符串存储在值对象中，所以如果这会让你失望稍后在您的代码中，确保您考虑到了它。

单击 Formik Field 单选按钮并更新值，但未将单选按钮显示为已选中

Formik Field radio button is clicked and value got updated, but does not showing radio button as selected

reactjs

formik