Yêu cầu thg 12 4, 2020 12:41 SA 889 0 1
  • 889 0 1
+1

Làm sao để lấy giá trị của name của form list trong antd design

Chia sẻ
  • 889 0 1

Chào mn, mình có 1 form như hình, issue của mình làm sao mình lấy được name của datapicker nằm trong form item của form list và set lại giá trị của datapicker lấy từ localstorage

form.setFieldsValues({
     name: ['days_off_lists', 0, 'vacation_day'],
     type: ['10/12/2020'],
   });
<Form.List name="days_off_lists">
               {(fields, { add, remove }) => {
                 return (
                   <div>
                     {fields.map((field, index) => {
                       return (
                         <Row>
                           <div className="day-of-regist-input-last-form">
                             <Space
                               key={field.key}
                               style={{ display: 'flex', marginBottom: 8 }}
                               align="baseline"
                             >
                               <Col>
                                 <Form.Item
                                   {...field}
                                   name={[field.name, 'vacation_day']}
                                   fieldKey={[field.fieldKey, 'vacation_day']}
                                   rules={[
                                     {
                                       required: true,
                                       message: 'vacation day is require !!',
                                     },
                                   ]}
                                 >
                                   <DatePicker
                                     placeholder={constant.FORMAT_DATE}
                                     format={constant.FORMAT_DATE}
                                     style={{ width: 200 }}
                                   />
                                 </Form.Item>
                               </Col>
                               
                               {fields.length > 1 ? (
                                 <Button onClick={() => remove(field.name)}>
                                   {t('button.remove')}
                                 </Button>
                               ) : null}
                             </Space>
                           </div>
                           {/* {handleError()} */}
                         </Row>
                       );
                     })}
                     <Form.Item>
                       <Button onClick={() => add()} disabled={valueData}>
                         {t('button.add')}
                       </Button>
                     </Form.Item>
                   </div>
                 );
               }}
             </Form.List>

1 CÂU TRẢ LỜI


Đã trả lời thg 12 4, 2020 1:00 SA
0

Bạn có thể tìm hiểu từ khóa initialValue trong document của antd nhé, hoặc bạn có thể sử dụng setFieldsValue cũng được nhưng mình thấy ở đây bạn đặt name={[field.name, 'vacation_day']}, nhưng ở trên bạn lại set ntn: name: ['days ... là sao nhỉ

Chia sẻ
Avatar Tuan Minh @Tuan89
thg 12 4, 2020 1:41 SA

Trong setFieldsValue , name đó mình lấy cái value của cái name nằm trong form item, tức là nếu muốn truy cập được thằng vacation thì mình phải đi từ days_off_lists[0].vacation_vay, cái value của name đó mình đã lấy được nhưng không biết cách đổ giá trị vào thằng datapicker nằm trong form item

Avatar Nguyen Trung Thanh @NguyenTrungThanh
thg 12 4, 2020 2:18 SA

@Tuan89 name này là name của form.item nhé bạn, tức là bạn có thể hiểu name(của form.item): value(giá trị bạn muốn gàn vào thằng form.item). Mà nếu bạn chỉ muốn set giái trị default của form này thì bạn có thể tham khảo initialValues nhé. Trên document nó có hướng dẫn cách sử dụng luôn này https://ant.design/components/form/#components-form-demo-normal-login

Avatar Tuan Minh @Tuan89
thg 12 4, 2020 2:34 SA

@NguyenTrungThanh Mình muốn set giá trị date từ localstorage vào date picker ạ, còn như bn cmt thì bn hiểu sai ý mình rồi

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí