Question

过去两个小时，我一直在努力寻找如何使用formik中的自定义复选框组件来处理表单的方法。我通过Formik 2.0中引入的<Formik as >传递了它

input type='checkbox'出现了问题，因为我不能直接将true或false的值传递给它。

现在，我发布的解决方案据我所知是一个错误的实现。我真的没有找到一种方法来正确地传递组件中的值，所以我想将其作为组件中的单独状态处理复选框会处理自己的状态。

我的自定义输入组件的结构如下

import React, { useState } from 'react';
import { StyledSwitch, Wrapper } from './Switch.styled';

type Props = {
  value: boolean;
  displayOptions?: boolean;
  optionTrue?: string;
  optionFalse?: string;
};

const Switch: React.FC<Props> = (props: Props) => {
  const { value, optionTrue = 'on', optionFalse = 'off', displayOptions = false } = props;
  const [switchVal, setSwitchVal] = useState<boolean>(value);

  const handleSwitchChange = (): void => setSwitchVal(!switchVal);

  return (
    <Wrapper styledVal={switchVal}>
      <StyledSwitch type="checkbox" checked={switchVal} onChange={handleSwitchChange} />
      {displayOptions && (switchVal ? optionTrue : optionFalse)}
    </Wrapper>
  );
};

export default Switch;

./Switch.styled使用styled-components，但它们与该问题无关。分别将它们想象成<input>和<div>

现在这是处理开关的组件

import React, { useState } from 'react';
import { Formik, Form, Field } from 'formik';
import Switch from '../../../components/forms/Switch';

const QuizMenu: React.FC = () => {
  const [isMultipleChoice, setIsMultipleChoice] = useState<boolean>(false);

  const sleep = (ms: number): Promise<number> => new Promise((resolve) => setTimeout(resolve, ms));

  return (
    <Formik
      initialValues={{ isMultipleChoice: 'false', password: '' }}
      onSubmit={async (values): Promise<boolean> => {
        await sleep(1000);
        JSON.stringify(values, null, 2);
        return true;
      }}
    >
      {
        (): any => ( // to be replaced with formik destruct, but dont want eslint problems before implementation
          <Form>
            <div>
              <Field as={Switch} onClick={setIsMultipleChoice(!isMultipleChoice)} value={isMultipleChoice === true} name="isMultipleChoice" displayOptions />
              { isMultipleChoice }
            </div>
          </Form>
        )
      }
    </Formik>
  );
};

export default QuizMenu

;

这会产生以下错误：

错误：已超过最大更新深度。当一个组件发生这种情况重复调用componentWillUpdate内的setState或 componentDidUpdate。 React将嵌套更新的数量限制为防止无限循环。

我还尝试将value编辑为按照input type='checkboxed'的字符串，但是我真的找不到解决它的方法。如果您使用单独的handleChange()函数处理该错误，则会摆脱该错误，但是state出于某种原因不会更新。

处理此问题的正确方法是什么？

在Formik中使用Field处理自定义组件复选框

0 个答案: