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

Question

我已成功选择了一个单选按钮。我的问题是我还想在标签中包含选择。标签/单词也应该是可点击的。顺便说一句，我正在使用Formik

代码沙盒

CLICK HERE

   <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);
  };