（react踩过的坑）Antd Select（设置了labelInValue）在FormItem中initialValue的问题

最新推荐文章于 2024-06-03 10:45:15 发布
最新推荐文章于 2024-06-03 10:45:15 发布
阅读量3.6k 收藏 3
点赞数 3
分类专栏： react遇到的坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45884202/article/details/115373416
版权

Antd Select(设置了labelInValue)在FormItem中设置initialValue时应如下设置方能将原数据正确送显
在这里插入图片描述

咸鱼妹妹
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在antd Form表单中select设置初始值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <Form.Item label=作用对象> {getFieldDecorator('targetId', { initialValue: this.state.targetId }, { rules: [{ required: false, message: '作用对象' }] })( <Select placeholder=请选择作用对象> {targetList.map(entity => <Option key={enti
在react-antd中弹出层form内容传递给父组件的操作
01-21
我就废话不多说了，大家还是直接看代码吧~ ... getItemsValue = ()=>{ //3、自定义方法，用来传递数据（需要在父组件中调用获取数据） const values= this.props.form.getFieldsValue(); //4、getFi
antDesign的a-select数据回显选中initialValue问题解决方法
marko39的专栏
07-28 1692
在开发过程中表单中的【学习专业】下拉列表项需要数据回显，设置了initialValue，但只显示下拉选项的majorId值, 没有显示具体的专业名称，经排查发现是majorId数据类型导致的，下拉选项majorList数组中的id是数值类型，而在表单赋值时给的majorId是字符类型，数据类型不一致导致的 ，将两边的id类型转为一致的就可以了。在对变量赋值时，强制转变类型 , 我这是都转为数值类型，你都转为字符类型也可以。下拉框数据回显正常了。
Select onChange causes warning: label of value is not same as label in Select options.
最新发布
u010234868的专栏
06-03 121
select的options中的label、value没有跟默认值对应上。
Antd Select（设置了labelInValue）在FormItem中initialValue的问题
tony121lee的专栏
04-30 1万+
Antd Select(设置了labelInValue)在FormItem中设置initialValue时应如下设置方能将原数据正确送显(xxx为隐去项目敏感信息)： <FormItem key="XXX" labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="XXX"> {form.getFieldDecorator...
Antd中为select框使用initialValues
Peng的博客
08-30 2560
在学习Antd Pro时遇到了一个问题 问题场景 在ProForm中通过initialValues可以设置表单元素的默认值： <ProForm initialValues={{ username: props.values.username, category_id: props.values.category_id, }} 但是category_id对应的是一个下拉框，这样设置的实际效果与预期效果如下图： 在其他平台中查找
React使用ant design pro的ProFormSelect组件，使用属性LabelInValue后清除选中值，无法显示placeholder
L_jin_c的博客
07-25 1520
使用ant design pro的ProFormSelect组件，使用属性LabelInValue后清除选中值，无法显示placeholder
antd labelInValue的使用
zhouzhiling_的博客
02-10 3477
antd labelInValue的使用使用场景从远端调用接口debounce函数防抖：debounce使用场景答主在请求数据时使用了一下debounce，目的是为了等待接口里数据全部返回，具体使用如下throttle使用场景（给你10秒能干多少是多少）throttle暂时还未使用过labelInValue 使用场景 博主最近做到两个需求，一个是从select中输入数据后调用接口，一开始的时候不会写，后面查看antd的官方文档后了解到了写法； 二是要求把id和name同时传回后端，以前使用的是select的
react项目 form表单重置 initialValue
qinyuhua93的博客
11-23 7650
项目中做了一个弹框，将新增和修改放到了同一个弹框，然后判断一个对象是否有值来判断是新增还是修改。 render() { const extra = ( &lt;Group&gt; &lt;Button onClick={this.handleAdd}&gt;新增&lt;/Button&gt; &lt;/Group&gt; ); ...
在react项目中使用antd的form组件,动态设置input框的值
01-18
点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。 解决办法： 不使用...
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ required: true, message: '请输入用户名', }], })( <Input placeholder='\u8bf7\u8f93\u5165\u7528\u6237\u540d'/> ) } </...
react-antd-super-form:演示
05-31
react-antd-super-formInstallnpm install --save react-antd-super-form1.x 的版本 适用于 antd 3.x2.x 的版本 适用于 antd 4.xUsageimport React, { Component } from 'react';import SuperForm, { Table, List, ...
Ant Design Modal中内嵌Form表单的initialValue值不动态更新问题
热门推荐
小白变怪兽
01-19 3万+
场景描述： 如下图所示，点击减免天数会出现一个弹窗， 输入天数后点击确定，保存这个值， 但是我在点第二行的减免天数的时候初始应该是空的， 可是现在显示的是第一行输入的值； <Modal title="减免天数" visible={that.state.visible} onOk={that.handleOk.bind(that)} onCancel={t
关于ant.design里面form表单的initialValues设置不能实时更新的问题
m0_65808332的博客
09-01 1930
关于ant.design里面form表单的initialValues设置不能实时更新的
Ant Design Vue select 中label-in-value的使用，以及动态设置select默认值，默认值为空时placeholder不显示的问题
qq_43710066的博客
03-30 6605
Ant Design Vue select 中label-in-value的使用，以及动态设置select默认值，默认值为空时placeholder不显示的问题
利用ant-design下拉选择框select的labelInValue属性给下拉选项添加图标
study_way的博客
10-14 2719
给下拉选项框select添加小图标这个问题，ant-design,labelInvalue属性
Ant Design Vue form select组件结合labelInValue属性出现的问题
ke_sin的博客
03-02 3411
需求： 一个下拉选项，平常只需传value值，但是后端需要label和value值，这个问题给组件加一个:labelInValue='true’属性就可以了，但会引发其它问题 <a-form-item label="销售"> <a-select @change='saleChange' :labelInValue='true' v-decorator="['sale_id' , { rules: [{ required: true, message: '请选择
解决vue select下拉框中的label传值有空格
weixin_44136421的博客
06-03 1363
1.vue代码格式化后的效果 . 2.造成有空格的现象是因为上面select中的option标签换行导致的，在编辑器中格式化代码可能会造成option标签换行，解决方法就是在option标签这里
react ant-design表单获取不到Select值或者初始化默认值不生效(封装的表单元素值）
qq_26889291的博客
01-19 2396
<GftSearch onChange={(data) => { console.log('data',data) }} onChange给 GftSearch组件就好了，然后在GftSearch里面的onChange里面调用this.props.onChange(value) // value是onChange回调的value
antd3 和 react hook 怎么写form表单
04-05
在Antd3中，可以使用`Form`组件和`FormItem`组件来创建表单。具体步骤如下： 1. 引入`Form`和`FormItem`组件以及需要的表单控件组件。 ```jsx import { Form, Input, Button } from 'antd'; const FormItem = Form.Item; ``` 2. 定义表单的初始值和验证规则。 ```jsx const initialValues = { username: '', password: '', }; const validateRules = { username: [{ required: true, message: 'Please input your username!' }], password: [{ required: true, message: 'Please input your password!' }], }; ``` 3. 在组件中使用`Form`组件，并在其中添加`FormItem`组件和表单控件组件。其中，`getFieldDecorator`方法用来连接表单控件和表单数据，并设置验证规则。 ```jsx const MyForm = () => { const [form] = Form.useForm(); const handleSubmit = (e) => { e.preventDefault(); form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values); } }); }; return ( <Form form={form} initialValues={initialValues} onSubmit={handleSubmit}> <FormItem label="Username"> {form.getFieldDecorator('username', { rules: validateRules.username, })(<Input />)} </FormItem> <FormItem label="Password"> {form.getFieldDecorator('password', { rules: validateRules.password, })(<Input.Password />)} </FormItem> <FormItem> <Button type="primary" htmlType="submit"> Submit </Button> </FormItem> </Form> ); }; ``` 而在使用React Hook的情况下，可以使用`useState`来存储表单数据和`useEffect`监听变化。具体步骤如下： 1. 定义表单的初始值和验证规则。 ```jsx const initialValues = { username: '', password: '', }; const validateRules = { username: [{ required: true, message: 'Please input your username!' }], password: [{ required: true, message: 'Please input your password!' }], }; ``` 2. 使用`useState`来存储表单数据。 ```jsx const [formValues, setFormValues] = useState(initialValues); ``` 3. 在组件中使用表单控件组件，并设置onChange事件来更新表单数据。 ```jsx const MyForm = () => { const handleSubmit = (e) => { e.preventDefault(); console.log('Received values of form: ', formValues); }; return ( <form onSubmit={handleSubmit}> <label> Username: <Input type="text" name="username" value={formValues.username} onChange={(e) => setFormValues({ ...formValues, username: e.target.value }) } /> </label> <br /> <label> Password: <Input.Password name="password" value={formValues.password} onChange={(e) => setFormValues({ ...formValues, password: e.target.value }) } /> </label> <br /> <Button type="primary" htmlType="submit"> Submit </Button> </form> ); }; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值