antd中被设置了 name 属性的 Form.Item 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:

  1. 你不再需要也不应该用 onChange 来做数据收集同步(你可以使用 Form 的 onValuesChange),但还是可以继续监听 onChange 事件。

  2. 你不能用控件的 value 或 defaultValue 等属性来设置表单域的值,默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新。

  3. 你不应该用 setState,可以使用 form.setFieldsValue 来动态改变表单值。

    1
    2
    3
    4
    5
    6
    7
    8
    onValuesChange  = (propFormItem, allFormItem) =>{
        if("status" in propFormItem &&  !propFormItem.status && allFormItem.staus1) {
          const formInstance = this.refs.form;
          formInstance.setFieldsValue({
            status: false,
          })
        }
      }

      

  4. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <Form
                ref="form"
                initialValues={{
                  status,
                  status1,
                }}
                onValuesChange={this.onValuesChange}
                onFinish={this.onFinish}
              >
    <FormItem
                  label='是否拥有'
                  name="status"
                  valuePropName='checked'
                >
                  <Switch checkedChildren="是" unCheckedChildren="否"  onChange={(value) => { this.setState({status: value})}} />
                </FormItem>
     
                <FormItem
                  label='关联是否拥有'
                  name="status1"
                  valuePropName='checked'
                >
                 
                  <Switch
                  checkedChildren="是" unCheckedChildren="否"
                  disabled={!this.state.status}
                    />
                </FormItem>
                
                <FormItem
                  {...submitFormLayout}
                  style={{
                    marginTop: 32,
                  }}
                >
                  <Button type="primary" htmlType="submit" loading={submitting}>
                    保存
                  </Button>
                </FormItem>
              </Form>

      

posted on   ygunoil  阅读(2104)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示