语义用户界面反应选择字段的Formik验证(下拉列表)

时间:2020-01-21 13:32:10

标签: reactjs redux react-redux

大家好,我想使用selectInput(下拉列表)验证语义UI形式,但它会发出警告,并且不起作用。这是警告:

Formik called handleChange, but you forgot to pass an "id" or "name" attribute to your input: <div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;"><span class="text">value Two</span></div>Formik cannot determine which value to update.

Formik可以正确验证textInput,但是对于selectInput,它会带来上述警告,并且handleSubmit函数中什么也没有采取。 下面是代码片段。

      <Formik
      initialValues={{ levelValue: "", attachLevel: "" }}
      validationSchema={Yup.object({
      levelValue: Yup.string().required("Required Please"),
      attachLevel: Yup.string().required("Required Please")
     })}
     onSubmit={(values, { setSubmitting }) => {
       setTimeout(() => {
         alert(JSON.stringify(values, null, 2));
         setSubmitting(false);
          }, 400);
       }}
     >
     {({
       values,
       errors,
       touched,
       handleChange,
       handleBlur,
       handleSubmit,
       isSubmitting
     }) => (
            <Form onSubmit={handleSubmit}>
              <Form.Group>
                <Form.Input
                   name="levelValue"
                   placeholder="Define Level..."
                   onChange={handleChange}
                   onBlur={handleBlur}
                   value={values.levelValue}
                   type="text"
                  />
                 {touched.levelValue && errors.levelValue ? (
                   <span className="span_error">
                      {errors.levelValue}
                   </span>
                  ) : null}
                 </Form.Group>
                 <Form.Group>
                   <Form.Input
                     control={Select}
                     name="attachLevel"
                     onChange={handleChange}
                     onBlur={handleBlur}
                     defaultValue={values.attachLevel}
                     multiple
                     options={Class}
                   />
                   {touched.attachLevel && errors.attachLevel ? (
                    <span className="span_error">
                      {errors.attachLevel}
                     </span>
                  ) : null}
                  </Form.Group>
                  <Button
                    color="blue"
                    type="submit"
                    className="submit"
                    disabled={isSubmitting}
                  >
                    <Icon name="add" />
                      Attach
                  </Button>
                </Form>
           )}
      </Formik>

请提供任何帮助。...

0 个答案:

没有答案
相关问题