使用带有Yup和React-select的Formik进行验证

Question

我正在使用cleanup和Yup进行反应表单验证。 表单中还有一个Formik元素也需要验证。为了进行验证，我使用react-select中的validationSchema来验证值更改时的形式。 我只需要选择字段的值作为字符串，所以不能采用完整的对象（键值）。 选择字段运行良好，但是没有清除验证错误消息。 问题是如何使用现有方法验证选择字段？

下面是最小代码示例。

Formik

这是密码框：

PS：我是Reactjs的新手。

Answer 1

更改

handleChange("year")

收件人

handleChange("year")(selectedOption.value);

当前，Formik值中的year字段未更新。 handleChange（）函数返回一个新函数，该函数可以通过值来调用以更新Formik状态。

发现这些东西的最简单方法是通过使用以下代码输出Formik道具：

<pre>{JSON.stringify(props, null, 2)}</pre>

See this sandbox为例。在沙盒中，我完全删除了对自定义年份状态的需要。我建议仅使用Formik状态来操纵值。仅使用Formik状态，保存时可能只需要提取年份部分，因为react-select默认使用完整的对象。

Answer 2

简单的解决方案 ::它对我有用，即使对于其他任何类型的输入字段，例如 react-color或datepicker ... < / strong> ，，在这里-handleChange来自formik

validationSchema:yup.object({
 year_value :yup.string().required('*sales person is required.'),

}）

<Select 
    className=" my-3 "
    name="year_value"
    id="year_value"
    placeholder='Choose Prevelage Level'
    value={values.year_value}
    onBlur={handleBlur}
    onChange={selectedOption => {
        let event = { target : { name:'year_value',value: selectedOption}}
        handleChange(event)
    }}
    onBlur={()=>{
      handleBlur({ target: {name:'year_value'} });
    }}
    options={yearOptions}
/>

Answer 3

如果将来有人在寻找解决方案，这是一种替代方法，可从react-select中将所选值作为字符串获取-并使Yup对select输入执行验证：

使用useField（）中的辅助函数，可以设置“字段”的值，接触状态和错误状态。每当您使用非输入元素（例如react-select）时，useField（）都会很有帮助。

function FormikSelect(...props) {
  const [field, meta, helpers] = useField(name="mySelectInput"); // can pass 'props' into useField also, if 'props' contains a name attribute
  const { setValue, setTouched, setError } = helpers;

  const setFieldProps = (selectedOption) => {
      setValue(selectedOption.value) 
      setTouched(true)
      setError(undefined)
  }

  return (
        <Select onChange={selectedOption => setFieldProps(selectedOption)} />
  );
};

Answer 4

我会使用 Formik select 而不是像这样反应选择：

    const initialValues = {
        name: "",
        year: ""
    };

    const testSchema = Yup.object().shape({
      name: Yup.string().required("Enter Name"),
      year: Yup.string().required("Select Year")
    });

    <Field as="select" name="year" id="year">
    <option value="" label="">
    Select Your Year{" "}
    </option>
    {yearOptions.map(item => 
       <option value={item.value} label={item.label}>{item.value}</option>
   )} 
    </Field>

使用选项数组上的映射来制作选项