Form.List的使用,设置某个字段的值

1.Form.Item的name

html 复制代码
                <Form.Item
                    name={['base_range', 'company_base_range_start']}
                    dependencies={[['base_range', 'company_base_range_end']]}
                    rules={[
                      { required: true, message: '请输入下限' },
                      {
                        validator: (_, value) =>
                        validateMoneyRule(value,base_range?.company_base_range_end)
                      }
                    ]}
                    style={{ display: 'inline-block', width: 'calc(50% - 15px)' }}
                  >
                    <InputNumber
                      controls={false}
                      placeholder='下限'
                      addonAfter='元'
                      style={{ width: '100%' }}
                    />
                  </Form.Item>

form.item的naem可以为数组或者字符串,当后端接口文档中的字段有相同名字的时候,可以用数组。

dependencies,依赖,一般是校验规则时会用到。

2.设置Form.List的某个字段的值

html 复制代码
 <Form.List name='account_info' initialValue={[{}, {}, {}, {}]}>
          {(fields) => (
            <>
              {fields.map(({ key, name }, index) => (
                <div key={key}>
                  <Row>
                    <Col span={1} />
                    <Col span={5}>
                      <Form.Item name={[name, `scene`]} {...noLabelLayout} valuePropName='checked'>
                        <Checkbox
                          disabled={!!subjectScene?.[index]?.scene}
                          onChange={() => {
                            form.setFieldValue(['account_info', index, 'id'], undefined)
                          }}
                        >
                          {sceneList[index]}
                        </Checkbox>
                      </Form.Item>
                    </Col>
                    <Col span={17}>
                      <Form.Item
                        name={[name, 'id']}
                        {...noLabelLayout}
                        rules={[{ required: account_info?.[index]?.scene, message: '请选择账户' }]}
                      >
                        <BankAccountSelect
                          placeholder='请选择'
                          disabled={!!subjectScene?.[index]?.scene || !account_info?.[index]?.scene}
                          subject_id={subjectObject?.key}
                          open_status={1}
                          style={{ width: '100%' }}
                        />
                      </Form.Item>
                    </Col>
                  </Row>
                </div>
              ))}
            </>
          )}
        </Form.List>

3.一行展示form.item

html 复制代码
<Form.Item label='范围' {...shortLayout} className='label__required'>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <Form.Item
                    name={['base_range', 'personal_base_range_start']}
                    dependencies={[['base_range', 'personal_base_range_end']]}
                    rules={[
                      { required: true, message: '请输入下限' },
                      {
                        validator: (_, value) =>
                          validateMoneyRule(value, base_range?.personal_base_range_end)
                      }
                    ]}
                    style={{ display: 'inline-block', width: 'calc(50% - 15px)' }}
                  >
                    <InputNumber
                      controls={false}
                      placeholder='下限'
                      addonAfter='元'
                      style={{ width: '100%' }}
                    />
                  </Form.Item>
                  <span style={{ margin: '0 10px 24px' }}>---</span>
                  <Form.Item
                    name={['base_range', 'personal_base_range_end']}
                    rules={[
                      { required: true, message: '请输入上限' },
                      {
                        validator: (_, value) => validateMoneyRule(value)
                      }
                    ]}
                    style={{ display: 'inline-block', width: 'calc(50% - 15px)' }}
                  >
                    <InputNumber
                      controls={false}
                      placeholder='上限'
                      addonAfter='元'
                      style={{ width: '100%' }}
                    />
                  </Form.Item>
                </div>
              </Form.Item>
相关推荐
然我几秒前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子6 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹9 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器16 分钟前
指定阿里镜像原理
前端
枷锁—sha20 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha22 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜38 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux