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

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

我正在尝试以Reactik的形式使用数据列表。我试图以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`.

是否可以在formik中使用数据列表？

解决方法

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

<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>