如何在 Formik 中使用数据列表输入？

Question

我正在尝试在 ReactJS 中以 formik 形式使用 datalist。我正在尝试以 formik 形式在 datalist 选项中动态显示数组列表。所以，我做了如下：

<Formik
initialValues={initialValues}
validationSchema={AddEmployeeFormValidationSchema}
onSubmit={props.handleSubmitMethod}
>
{(formikProps) => (
  <Form onSubmit={formikProps.handleSubmit}>
  
    <div className="form-row">
      <Col>
        <FormGroup>
          <label>Designation</label>

          <Field
            type="text"
            name="designation"
            list="designations"
            id="designation"
        
          >
            <datalist id="designations">
              {props.designations.map((designation) => {
                return (
                  <option
                    value={`${designation.id}`}
                    key={`${designation.id}`}
                  >
                    {`${designation.designation_title}`}
                  </option>
                );
              })}
            </datalist>
         
          </Field>
          <ErrorMessage
            name="designation"
            component="div"
            className="text-danger"
          />
        </FormGroup>
      </Col>
     
    <div className="form-row mt-3 text-right">
      <Col>
        <Button
          className="primary-color"
          type="submit"
          disabled={!formikProps.dirty || formikProps.isSubmitting}
        >
          Submit
        </Button>
      </Col>
    </div>
  </Form>
)}
</Formik>

但它向我显示以下错误：

Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

是否可以将 datalist 与 formik 一起使用？

Answer 1

该datalist元素不应该是输入组件的子元素，而是由 id 引用。将元素放置datalist在 Field 组件旁边，它应该可以工作。

<Field
  type="text"
  name="designation"
  list="designations"
  id="designation"
/>
<datalist id="designations">
  {props.designations.map((designation) => {
    return (
      <option
        value={`${designation.id}`}
        key={`${designation.id}`}
      >
        {`${designation.designation_title}`}
      </option>
    );
  })}
</datalist>