react使用antd資料改變檢視沒更新原因
阿新 • • 發佈:2020-12-06
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("specialCustSeeStatus" in propFormItem && !propFormItem.specialCustSeeStatus && allFormItem.specialCustActStatus) { const formInstance = this.refs.form; formInstance.setFieldsValue({ specialCustActStatus: false, }) } }
-
<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>