[英]How to use datalist input with Formik?
I am trying to use datalist in a formik form with ReactJS.我正在尝试在 ReactJS 中以 formik 形式使用 datalist。 I am trying to show a list of array dynamically in datalist option in formik form.
我正在尝试以 formik 形式在 datalist 选项中动态显示数组列表。 So, I have done as below:
所以,我做了如下:
<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>
But it shows me the following error:但它向我显示了以下错误:
Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
Is it possible to use datalist with formik?是否可以将 datalist 与 formik 一起使用?
The datalist
element shouldn't be a child of the input component, but is rather referenced by id. datalist
元素不应该是输入组件的子元素,而是由 id 引用。 Place the datalist
element next to the Field component and it should work.将
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.