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>
    

      

原文地址:https://www.cnblogs.com/ygunoil/p/14093042.html