目录
一、问题描述
1.1、环境
1.2、问题展示
1.3、问题代码展示
1.4、控制台效果
1.5、解释
二、官网解释
官网链接https://ant.design/components/form-cn
三、解决方案
3.1、修改版部分代码
3.2、修改版结果
3.3、思路
一、问题描述
1.1、环境
项目环境:react+antd
组件环境:Modal, Form, Input, Button, InputNumber, Radio
1.2、问题展示
广告请求权重只有在所属页面选择为启动页是是非禁用的,在其他页面都是禁用的状态而且广告请求权重默认为100
现在有一个问题就是:启动页配置了权重大小,切换到其他页面权重值并没有改变到100默认值
1.3、问题代码展示
// showRateValue用于存值,用于响应式修改值
const [showRateValue, setShowRateValue] = useState(100);
// pageType所属页面的值,用于判断是否是启动页
const [pageType, setPageType] = useState(0);
<Form
colon
ref={formRef}
{...formItemLayout}
onFinish={onFinish}
onFinishFailed={value => console.log(value)}
>
// 所属页面,当页面radio的值改变时,修改showRateValue的值
<Item
label="所属页面"
name="pageType"
rules={[{ required: true, message: '所属页面不能空' }]}
>
<Radio.Group
onChange={e => {
setPageType(e.target.value);
setShowRateValue(100)
console.log("showRateValue", showRateValue)
}}
>
<Radio value={0}>首页</Radio>
<Radio value={1}>列表页</Radio>
<Radio value={2}>控制页</Radio>
<Radio value={3}>个人中心</Radio>
<Radio value={4}>引导页</Radio>
<Radio value={5}>启动页</Radio>
</Radio.Group>
</Item>
// 广告请求权重,值绑定为showRateValue
<Item
label="广告请求权重"
name="showRate"
rules={[{ required: true, message: '请输入0~100的整数' }]}
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、控制台效果
1.5、解释
点击启动页修改权重然后回到其他页面,发现showRateValue数值并没有改变,还是87,但是,打印出来缺是改变为100了的
二、官网解释
官网链接https://ant.design/components/form-cn
被设置了 name
属性的 Form.Item
包装的控件,表单控件会自动添加 value
(或 valuePropName
指定的其他属性) onChange
(或 trigger
指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
- 你不再需要也不应该用
onChange
来做数据收集同步(你可以使用 Form 的onValuesChange
),但还是可以继续监听onChange
事件。 - 你不能用控件的
value
或defaultValue
等属性来设置表单域的值,默认值可以用 Form 里的initialValues
来设置。注意initialValues
不能被setState
动态更新,你需要用setFieldsValue
来更新。 - 你不应该用
setState
,可以使用form.setFieldsValue
来动态改变表单值。
三、解决方案
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="所属页面"
name="pageType"
rules={[{ required: true, message: '所属页面不能空' }]}
>
<Radio.Group
onChange={e => {
setPageType(e.target.value);
form.setFieldsValue({
showRate: '100',
});
}}
>
<Radio value={0}>首页</Radio>
<Radio value={1}>列表页</Radio>
<Radio value={2}>控制页</Radio>
<Radio value={3}>个人中心</Radio>
<Radio value={4}>引导页</Radio>
<Radio value={5}>启动页</Radio>
</Radio.Group>
</Item>
//这里的initialValue,以及inputNumber中的value并不需要绑定响应式的值,没有用
<Item
label="广告请求权重"
name="showRate"
rules={[{ required: true, message: '请输入0~100的整数' }]}
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、修改版结果
切换就立马改变
3.3、思路
a)引入 const [form] = Form.useForm();
b)在Form中加入:form={form}文章来源:https://www.toymoban.com/news/detail-609544.html
c)使用form.setFieldsValue对数据进行修改文章来源地址https://www.toymoban.com/news/detail-609544.html
到了这里,关于antd项目中input框的value值不能被修改,form.setFieldsValue 来动态改变表单值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!