Comments (9)
Start a new pull request in StackBlitz Codeflow.
from ant-design.
Can you tell me about your requirements? In fact, the trigger property is used to declare the timing of the component's value change, and Form.Item will convert its child components into a controlled mode. If you set onblur, during the first rendering, because the value is undefined, the component is still in an uncontrolled state at this point, so the input behavior can change the value. However, after an onblur event is triggered once, the value is no longer undefined, and the component is now controlled. It will attempt to change the value through the onblur event, which, of course, will not update correctly. Of course, if you want to trigger validation when onblur occurs, please refer to validateTrigger.
from ant-design.
Can you tell me about your requirements? In fact, the trigger property is used to declare the timing of the component's value change, and Form.Item will convert its child components into a controlled mode. If you set onblur, during the first rendering, because the value is undefined, the component is still in an uncontrolled state at this point, so the input behavior can change the value. However, after an onblur event is triggered once, the value is no longer undefined, and the component is now controlled. It will attempt to change the value through the onblur event, which, of course, will not update correctly. Of course, if you want to trigger validation when onblur occurs, please refer to validateTrigger.
I need to send the value of the input field after onBlur
There is a form, somewhere there is a delay in sending data after entering, and somewhere I need to send data only when onBlur is triggered, and it turns out that after entering values I can no update the field
Also in my example on stackblitz note that input: number with onBlur, everything works fine, why is that?
from ant-design.
trigger
means the value which will Form.Item to collect.
- At the first time, the field value is
undefined
. So Input will work as uncontrolled component. - When
onBlur
, thevalue
is set to what user input. The Input will be the controlled component. So any type will not work.
You should not use trigger
for validation. But use validateTrigger
instead.
from ant-design.
Also in my example on stackblitz note that input: number with onBlur, everything works fine, why is that?
Input follow the behavior as native input element since every time the input is what input validate value. But InputNumber has the flying status. e.g. 1.2
type 1.
, the 1.
is not validate number. If it force as controlled, user will never successfully type the 1.2
. So it will keep tracking typing status.
So if you want to follow the InputNumber behavior. You can HOC Input component to make focus not be controlled.
from ant-design.
Also in my example on stackblitz note that input: number with onBlur, everything works fine, why is that?
Input follow the behavior as native input element since every time the input is what input validate value. But InputNumber has the flying status. e.g.
1.2
type1.
, the1.
is not validate number. If it force as controlled, user will never successfully type the1.2
. So it will keep tracking typing status.So if you want to follow the InputNumber behavior. You can HOC Input component to make focus not be controlled.
again I need to get value in
<Form form={form} onValuesChange={debounceHandler}>
using
Form.Item with trigger="onBlur"
and whether input or textarea
Please give me an example where this would work
from ant-design.
again I need to get value in
<Form form={form} onValuesChange={debounceHandler}>
usingForm.Item with trigger="onBlur"
and whether input or textarea
Please give me an example where this would work
If you need to perform some operations ononBlur
, you can do it like this, but please make sure that the antd component you are using can accept theonBlur
property.
from ant-design.
onBlur
I need onValuesChange to only work when onBlur is enabled.
your example still fires onValuesChange during input
from ant-design.
It feels a bit difficult to handle, as the form component triggers onValuesChange every time updateValue is called.
from ant-design.
Related Issues (20)
- 希望支持全局配置形态变体(variant) HOT 6
- Image自定义预览内容后工具栏不起作用 HOT 10
- Expansion items cannot be scrolled after table columns are fixed. 表格列固定后,扩展项无法滚动 HOT 2
- 希望能出一个Remixjs基于vite最新构建的antd5 ssr渲染的Demo? HOT 1
- antd5不支持Remix vite ssr渲染 HOT 9
- 官网 breadcrumb 部分demo加载失败 bug HOT 8
- Neutral Color Palette missing HOT 1
- Three way switch or switches with dynamic number of values HOT 3
- <StyleProvider layer /> messageApi.success() 等提示的图标颜色被覆盖 HOT 2
- Problem with hiding options and showing `notFoundContent` in Select "tags" mode
- [Input]chrome浏览器上微软中文输入法输入123,4会自动变成123,44被多加了一位(可能是对value格式化引起的) HOT 3
- rc-virtual-list horizontal scroll bug, very fast scrolling HOT 1
- 自定义全局组件的 Empty 样式后,Table的过滤面板没生效 HOT 6
- Badge has insufficient color contrast HOT 3
- 使用谷歌浏览器的插件DARK READER的暗黑模式,ant-design的网站会报错打不开 HOT 2
- Incorrect decimal formatting/parsing in InputNumber component HOT 3
- Table组件的中当数据源中存在BigInt数据类型时,无法渲染此类型的Bug HOT 7
- Modal Close Button aria-label Not Correctly Translated for "de" Locale HOT 3
- tags导航 布局bug HOT 6
- Dynamic row adjustment HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ant-design.