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

像这样使用：第一个错误：对收音机输入使用相同的名称第二个错误：当显示它被选中时通过检查道具

<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 value 标签的 <Field /> 属性是一个数字类型，而不是一个字符串（是的，我知道这可能是有意为之，但请耐心等待...）

如果您将 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 进行架构验证（如 Formik documentation on validation 推荐的那样）并且这仍然通过了对可为空的必需数字的验证：

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

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

注意，但是因为它显然是作为字符串存储在 values 对象中的，所以如果这会让您稍后在代码中发现它，请确保你负责。

单击了“ Formik字段”单选按钮，并且值已更新，但未显示选中的单选按钮

2 个答案: