antd pro 表单联动方法

antd ProFormSelect表单联动官方文档比较难找,我简单整理一下,以官网为准

使用组件ProFormDependency

<ProForm.Group>
   <ProFormSelect colProps={{ span: 11 }}
     options={[
       {
         value: 'stock',
         label: '股票',
       },
       {
         value: 'bond',
         label: '债券',
       },
     ]}
     name="codeType"
     label="标的类型"
   // rules={[{ required: true }]}
   />
   <ProFormDependency name={['codeType']}>
     {({ codeType }) => {
       return (
         <ProFormText
           colProps={{ span: 11, offset: 1 }}
           style={{ marginLeft: 20 }}
           name="trade"
           label="所属行业"
           placeholder="股票标的对应行业自动生成"
           // dependencies={['codeType']}
           disabled={codeType === "stock"}
         />
       );
     }}
   </ProFormDependency>
 </ProForm.Group>

使用dependencies

参考自: proformSelect dependencies

<ProForm.Group>
  <ProFormSelect
     name="parentName"
     label="一级类别"
     width="sm"
     fieldProps={{
       maxTagCount: 1,
     }}
     // dependencies 的内容会注入 request 中, 关联name表单
     dependencies={['name']}
     request={async (params) => {
       const newParam = formRef?.current?.getFieldValue('name')
         ? [{ label: params.name, value: params.name }]
         : [];
       const allParams = newParam.concat(category);
       return allParams;
     }}
     placeholder="请选择一级类别,右侧可添加新类别"
     rules={[{ required: true, message: '请选择一级类别!' }]}
   />
   <ProFormText width="sm" name="name" placeholder="请输入新一级类别" />
 </ProForm.Group>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于 antd 3.x 版本的多表单联动,你可以使用 `Form.create()` 方法结合 `getFieldDecorator` 和 `setFieldsValue` 方法来实现。 首先,你需要定义多个表单字段,并使用 `getFieldDecorator` 方法对每个字段进行包装,以便获取表单的值和进行校验。然后,你可以使用 `setFieldsValue` 方法来动态更新其他表单字段的值。 以下是一个示例代码,演示了如何实现两个表单字段之间的联动: ```jsx import React from 'react'; import { Form, Input } from 'antd'; class MyForm extends React.Component { componentDidMount() { const { form } = this.props; form.setFieldsValue({ // 设置初始值 field1: '', field2: '', }); } handleField1Change = (e) => { const { form } = this.props; const field1Value = e.target.value; // 更新 field2 的值 form.setFieldsValue({ field2: field1Value, }); } render() { const { getFieldDecorator } = this.props.form; return ( <Form> <Form.Item> {getFieldDecorator('field1', { rules: [{ required: true, message: 'Field 1 is required' }], })( <Input placeholder="Field 1" onChange={this.handleField1Change} /> )} </Form.Item> <Form.Item> {getFieldDecorator('field2', { rules: [{ required: true, message: 'Field 2 is required' }], })( <Input placeholder="Field 2" disabled /> )} </Form.Item> </Form> ); } } export default Form.create()(MyForm); ``` 在上面的示例代码中,我们定义了两个表单字段 `field1` 和 `field2`。当 `field1` 的值发生变化时,我们通过调用 `form.setFieldsValue` 方法来更新 `field2` 的值。在 `field2` 的 `getFieldDecorator` 中设置了 `disabled` 属性,以禁用该表单字段的输入。 你可以根据需要进行扩展和修改,实现更复杂的多表单联动效果。希望能帮到你!如果有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值