Formik을 사용하여 React JS에서 여러 양식을 업데이트하는 방법은 무엇입니까?
8011 단어 javascriptreactformwebdev
포믹 코드:
const updateForm = useFormik({
initialValues: {
name: '',
category: '',
image: ''
},
validationSchema: yup.object({
name: yup.string().min(2, "Product name should be at least 2 characters").required('Product name is required'),
category: yup.string().required('Product category is required'),
image: yup.string().required('Product image is required'),
}),
onSubmit: (values) => {
// updateProduct(values)
console.log(values)
}
})
JSX: 여러 양식을 생성하는 맵이 있는 여러 제품 목록
<div className="col-lg-7">
<div className="card-style mb-30">
<p className="text-sm mb-20">
Total products: {products.length}
</p>
{
products.length > 0 &&
products.map((product) => (
<div key={product.id} className="accordion mb-2" id="accordionExample">
<div className="accordion-item">
<div className="accordion-header p-3" id="headingOne">
<img src={require(`../../../../public/bvend/products/${product.image}`)} className="image-in-list" alt={product.name} />
<span className="ms-3">{product.name}</span>
<span className="ms-3">{product.category}</span>
<span className="float-end">
<button onClick={() => showEditPanel(product.id)} className='p-0 text-primary btn-link btn'>
<i className="lni lni-pencil-alt"></i>
</button>
<button onClick={() => showRemovePanel(product.id)} className='p-0 ms-2 text-danger btn-link btn'>
<i className="lni lni-trash-can"></i>
</button>
</span>
</div>
<div id='edit-panel' className={editPanel === product.id ? 'd-block' : 'd-none'}>
<div className="accordion-body bg-light">
<Form noValidate onSubmit={updateForm.handleSubmit}>
<Form.Group controlId="validationCustom01" className="input-style-1">
<Form.Control
className={updateForm.errors.name && "is-invalid"}
name="name"
required
type="text"
placeholder="Enter product name"
onChange={updateForm.handleChange}
onBlur={updateForm.handleBlur}
value={product.name}
/>
<Form.Control.Feedback type="invalid">
{updateForm.errors.name && updateForm.errors.name}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="validationCustom02" className="select-style-2">
<CategorySelect
formik={updateForm}
filterOption={product.category} />
<Form.Control.Feedback type="invalid">
{updateForm.errors.category && updateForm.errors.category}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formFileLg" className="input-style-1">
<Form.Control
className={updateForm.errors.image && "is-invalid"}
name="image"
required
type="file"
placeholder="Choose product image"
onChange={updateForm.handleChange}
onBlur={updateForm.handleBlur}
/>
<Form.Control.Feedback type="invalid">
{updateForm.errors.name && updateForm.errors.name}
</Form.Control.Feedback>
</Form.Group>
<div className="d-grid gap-2 d-md-flex justify-content-md-end">
<Button type="submit" className="main-btn primary-btn btn-hover btn-sm">Update Product</Button>
</div>
</Form>
</div>
</div>
<div id='remove-panel' className={removePanel === product.id ? 'd-block' : 'd-none'}>
<div className="accordion-body bg-light">
<h3>Are you sure to remove?</h3>
<div className="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
<button onClick={() => removeProduct(product.id)} className="main-btn danger-btn btn-hover btn-sm">Move to trash</button>
<button onClick={() => setRemovePanel(null)} className="main-btn light-btn btn-hover btn-sm">Cancel</button>
</div>
</div>
</div>
</div>
</div>
))
}
</div>
</div>
스택오버플로: https://stackoverflow.com/questions/73663057/how-to-use-formik-to-update-multiple-forms-in-react-js
도움말 #reactjs #formik #yup
Reference
이 문제에 관하여(Formik을 사용하여 React JS에서 여러 양식을 업데이트하는 방법은 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/wahidsherief/how-to-use-formik-to-update-multiple-forms-in-react-js-1hd3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Formik을 사용하여 React JS에서 여러 양식을 업데이트하는 방법은 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/wahidsherief/how-to-use-formik-to-update-multiple-forms-in-react-js-1hd3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)