如何在 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>