react使用antd数据改变视图没更新原因

最新推荐文章于 2024-06-01 10:54:36 发布

ygunoil

最新推荐文章于 2024-06-01 10:54:36 发布

阅读量371

点赞数

文章标签： react.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.csdn.net/ygunoil/article/details/133098525

版权

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

你不再需要也不应该用 onChange 来做数据收集同步(你可以使用 Form 的 onValuesChange)，但还是可以继续监听 onChange 事件。
你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。

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

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

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