zoukankan      html  css  js  c++  java
  • react使用antd数据改变视图没更新原因

    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 来动态改变表单值。

      onValuesChange  = (propFormItem, allFormItem) =>{
          if("status" in propFormItem &&  !propFormItem.status && allFormItem.staus1) {
            const formInstance = this.refs.form;
            formInstance.setFieldsValue({
              status: false,
            })
          }
        }
      

        

    4. <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>
      

        

  • 相关阅读:
    python 元组及操作
    python 字典所有操作
    python 列表操作
    python 运算符
    python while循环
    python 分支语句 等值判断 逻辑运算符
    GDI+_从Bitmap里得到的Color数组值分解
    服务器设计策略
    服务器设计策略
    IOCP的缓冲区
  • 原文地址:https://www.cnblogs.com/ygunoil/p/14093042.html
Copyright © 2011-2022 走看看