目錄
一、問題描述
????????1.1、環(huán)境
????????1.2、問題展示
?????????1.3、問題代碼展示
?????????1.4、控制臺(tái)效果
????????1.5、解釋
二、官網(wǎng)解釋
????????官網(wǎng)鏈接https://ant.design/components/form-cn
三、解決方案
????????3.1、修改版部分代碼
????????3.2、修改版結(jié)果
????????3.3、思路
一、問題描述
????????1.1、環(huán)境
????????????????項(xiàng)目環(huán)境：react+antd
????????????????組件環(huán)境：Modal, Form, Input, Button, InputNumber, Radio
????????1.2、問題展示
????????????????
廣告請(qǐng)求權(quán)重只有在所屬頁(yè)面選擇為啟動(dòng)頁(yè)是是非禁用的，在其他頁(yè)面都是禁用的狀態(tài)而且廣告請(qǐng)求權(quán)重默認(rèn)為100
現(xiàn)在有一個(gè)問題就是：啟動(dòng)頁(yè)配置了權(quán)重大小，切換到其他頁(yè)面權(quán)重值并沒有改變到100默認(rèn)值
?????????1.3、問題代碼展示
// showRateValue用于存值,用于響應(yīng)式修改值
const [showRateValue, setShowRateValue] = useState(100);
// pageType所屬頁(yè)面的值,用于判斷是否是啟動(dòng)頁(yè)
const [pageType, setPageType] = useState(0);
<Form
colon
ref={formRef}
{...formItemLayout}
onFinish={onFinish}
onFinishFailed={value => console.log(value)}
>
// 所屬頁(yè)面,當(dāng)頁(yè)面radio的值改變時(shí),修改showRateValue的值
<Item
label="所屬頁(yè)面"
name="pageType"
rules={[{ required: true, message: '所屬頁(yè)面不能空' }]}
>
<Radio.Group
onChange={e => {
setPageType(e.target.value);
setShowRateValue(100)
console.log("showRateValue", showRateValue)
}}
>
<Radio value={0}>首頁(yè)</Radio>
<Radio value={1}>列表頁(yè)</Radio>
<Radio value={2}>控制頁(yè)</Radio>
<Radio value={3}>個(gè)人中心</Radio>
<Radio value={4}>引導(dǎo)頁(yè)</Radio>
<Radio value={5}>啟動(dòng)頁(yè)</Radio>
</Radio.Group>
</Item>
// 廣告請(qǐng)求權(quán)重,值綁定為showRateValue
<Item
label="廣告請(qǐng)求權(quán)重"
name="showRate"
rules={[{ required: true, message: '請(qǐng)輸入0~100的整數(shù)' }]}
initialValue={showRateValue}
>
<InputNumber
min={0}
max={100}
value={showRateValue}
disabled={pageType == 5 ? false : true}
formatter={value => `${value}`}
parser={value => parseInt(value)}
style={{ width: '100%' }}
/>
</Item>
</Form>?????????1.4、控制臺(tái)效果
????????1.5、解釋
? ????????????????點(diǎn)擊啟動(dòng)頁(yè)修改權(quán)重然后回到其他頁(yè)面，發(fā)現(xiàn)showRateValue數(shù)值并沒有改變，還是87，但是，打印出來缺是改變?yōu)?00了的?
二、官網(wǎng)解釋
????????官網(wǎng)鏈接https://ant.design/components/form-cn
被設(shè)置了?name?屬性的?Form.Item?包裝的控件，表單控件會(huì)自動(dòng)添加?value（或?valuePropName?指定的其他屬性）?onChange（或?trigger?指定的其他屬性），數(shù)據(jù)同步將被 Form 接管，這會(huì)導(dǎo)致以下結(jié)果：
- 你不再需要也不應(yīng)該用?
onChange?來做數(shù)據(jù)收集同步（你可以使用 Form 的?onValuesChange），但還是可以繼續(xù)監(jiān)聽?onChange?事件。 - 你不能用控件的?
value?或?defaultValue?等屬性來設(shè)置表單域的值，默認(rèn)值可以用 Form 里的?initialValues?來設(shè)置。注意?initialValues?不能被?setState?動(dòng)態(tài)更新，你需要用?setFieldsValue?來更新。 - 你不應(yīng)該用?
setState，可以使用?form.setFieldsValue?來動(dòng)態(tài)改變表單值。
三、解決方案
????????3.1、修改版部分代碼
// 引入使用form
const [form] = Form.useForm();
<Form
colon
ref={formRef}
form={form}
{...formItemLayout}
onFinish={onFinish}
onFinishFailed={value => console.log(value)}
>
// 使用form.setFieldsValue改變表單里面的值
<Item
label="所屬頁(yè)面"
name="pageType"
rules={[{ required: true, message: '所屬頁(yè)面不能空' }]}
>
<Radio.Group
onChange={e => {
setPageType(e.target.value);
form.setFieldsValue({
showRate: '100',
});
}}
>
<Radio value={0}>首頁(yè)</Radio>
<Radio value={1}>列表頁(yè)</Radio>
<Radio value={2}>控制頁(yè)</Radio>
<Radio value={3}>個(gè)人中心</Radio>
<Radio value={4}>引導(dǎo)頁(yè)</Radio>
<Radio value={5}>啟動(dòng)頁(yè)</Radio>
</Radio.Group>
</Item>
//這里的initialValue,以及inputNumber中的value并不需要綁定響應(yīng)式的值,沒有用
<Item
label="廣告請(qǐng)求權(quán)重"
name="showRate"
rules={[{ required: true, message: '請(qǐng)輸入0~100的整數(shù)' }]}
initialValue={100}
>
<InputNumber
min={0}
max={100}
disabled={pageType == 5 ? false : true}
formatter={value => `${value}`}
parser={value => parseInt(value)}
style={{ width: '100%' }}
/>
</Item>
</Form>????????3.2、修改版結(jié)果
????????????????切換就立馬改變?
????????3.3、思路
????????????????a）引入 const [form] = Form.useForm();
????????????????b）在Form中加入：form={form}文章來源：http://www.zghlxwxcb.cn/news/detail-609544.html
????????????????c）使用form.setFieldsValue對(duì)數(shù)據(jù)進(jìn)行修改文章來源地址http://www.zghlxwxcb.cn/news/detail-609544.html
到了這里，關(guān)于antd項(xiàng)目中input框的value值不能被修改，form.setFieldsValue 來動(dòng)態(tài)改變表單值的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
