使用 Formik 在 React 中选择单选按钮

Question

我已经成功选择了一个单选按钮。我的问题是我还想包括带有标签的选择。 labels/words 也应该是可点击的。顺便说下我用的是Formik

Codesandbox

   <Wrapper>
      <Item onClick={handleChecked}>
        <Button
          type="radio"
          id={name}
          name={name}
          value={value}
          checked={checked}
          onChange={handleChecked}
        />
        <RadioButtonLabel />
        <div>{label}</div>
        {error && touched && <TextError>{error}</TextError>}
      </Item>
    </Wrapper>

Answer 1

在这种情况下，您应该使用 setFieldValue 而不是 handleChange：https://codesandbox.io/s/react-styled-components-radio-button-forked-s261s?file=/src/index.js:250-262

在您的应用中：

const {
  ...
  setFieldValue,
} = useFormik({
  ...
});

handleChange={setFieldValue}

在单选按钮中：

  const handleChecked = () => {
    handleChange(name, value);
  };

使用 Formik 在 React 中选择单选按钮

Radio Button Selection in React Using Formik

ecmascript-6

reactjs

formik

react-hooks