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>
相关推荐
YaHuiLiang3 分钟前
小微互联网公司与互联网创业公司 -- 学历之殇
前端·后端·面试
用户26124583401615 分钟前
vue学习路线(11.watch对比computed)
前端·vue.js
CAD老兵12 分钟前
前端 Source Map 原理与结构详解
前端
gnip15 分钟前
markdown预览自定义扩展实现
前端·javascript
大猫会长27 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_27 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js
snakeshe101029 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang29 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi30 分钟前
# Bsin-App Uni:面向未来的跨端开发框架深度解析
前端
G等你下课33 分钟前
AJAX请求跨域问题
前端·javascript·http