如何在Formik表单中使用datalist？ReactJS开发遇报错问题

当然可以在Formik里用datalist！你遇到的错误是因为HTML的<input>是空元素（void element）——它根本不能包含子元素，而你把<datalist>直接放在了Formik的<Field>组件内部（<Field>最终会渲染成<input>），这就触发了React的校验报错。

只需要调整一下DOM结构，把<datalist>从<Field>里面移出来，放在它的同级位置即可，保持list属性和datalist的id匹配就好。下面是修改后的完整代码：

<Formik 
  initialValues={initialValues} 
  validationSchema={AddEmployeeFormValidationSchema} 
  onSubmit={props.handleSubmitMethod} 
> 
  {(formikProps) => ( 
    <Form onSubmit={formikProps.handleSubmit}> 
      <div className="form-row"> 
        <Col> 
          <FormGroup> 
            <label>Designation</label> 
            {/* 把datalist移到Field外面 */}
            <Field 
              type="text" 
              name="designation" 
              list="designations" 
              id="designation" 
            />
            <datalist id="designations"> 
              {props.designations.map((designation) => ( 
                <option 
                  value={`${designation.id}`} 
                  key={`${designation.id}`} 
                > 
                  {designation.designation_title} 
                </option> 
              ))} 
            </datalist>
            <ErrorMessage name="designation" component="div" className="text-danger" /> 
          </FormGroup> 
        </Col> 
      </div>
      <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>

关键改动说明： #

• 把<datalist>从<Field>的子节点位置移到了外面，和<Field>同级
• 确保<Field>的list属性值（designations）和<datalist>的id完全一致，这样浏览器才能关联两者

额外提示： #

• 只要props.designations是响应式的数组（比如来自React状态或Redux store），当数据更新时，datalist的选项会自动重新渲染
• Formik会正常跟踪designation字段的输入值，验证、提交逻辑和普通Formik表单完全一致，不需要额外调整

内容的提问来源于stack exchange，提问作者Muminur Rahman