1. 程式人生 > 實用技巧 >react使用antd資料改變檢視沒更新原因

react使用antd資料改變檢視沒更新原因

antd中被設定了name屬性的Form.Item包裝的控制元件,表單控制元件會自動新增value(或valuePropName指定的其他屬性)onChange(或trigger指定的其他屬性),資料同步將被 Form 接管,這會導致以下結果:

  1. 你不再需要也不應該用onChange來做資料收集同步(你可以使用 Form 的onValuesChange),但還是可以繼續監聽onChange事件。

  2. 你不能用控制元件的valuedefaultValue等屬性來設定表單域的值,預設值可以用 Form 裡的initialValues來設定。注意initialValues不能被setState動態更新,你需要用setFieldsValue

    來更新。

  3. 你不應該用setState,可以使用form.setFieldsValue來動態改變表單值。

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

      

  4. <Form
                ref="form"
                initialValues={{
                  specialCustSeeStatus,
                  specialCustActStatus,
                }}
                onValuesChange={this.onValuesChange}
                onFinish={this.onFinish}
              >
    <FormItem
                  label='是否擁有'
                  name="specialCustSeeStatus"
                  valuePropName='checked'
                >
                  <Switch checkedChildren="是" unCheckedChildren="否"  onChange={(value) => { this.setState({specialCustSeeStatus: value})}} />
                </FormItem>
    
                <FormItem
                  label='關聯是否擁有'
                  name="specialCustActStatus"
                  valuePropName='checked'
                >
                
                  <Switch 
                  checkedChildren="是" unCheckedChildren="否"
                  disabled={!this.state.specialCustSeeStatus}
                    />
                </FormItem>
               
                <FormItem
                  {...submitFormLayout}
                  style={{
                    marginTop: 32,
                  }}
                >
                  <Button type="primary" htmlType="submit" loading={submitting}>
                    儲存
                  </Button>
                </FormItem>
              </Form>