Comments (4)
- defaultValue: only work in the first render
- value: for you to control the component value, and you should use onChange to modify the value. that's why called under controlled
you can see the detail in https://reactjs.org/docs/forms.html#controlled-components
from next.
- children v.s. props
- children for simple use, and it also makes information more intuitive to a human reader(developer)
<Select>
<Select.Option value="female">female</Select.Option>
<Select.Option value="male">male</Select.Option>
<Select.Option value="secrecy">secrecy</Select.Option>
</Select>;
- props for a large amount of data sources, maybe you get the data from a remote server with a considerable length
<Select dataSource={dataSource}/>
defaultValue
v.s.value
This involves a concept of React controlled-vs-uncontrolled-components
- When you use value, the component is controlled and you have full control over the components.It won't change value unless you set the value explicitly.
- When you use defaultValue only, the components is an uncontrolled component. You don't have to care about the data flow inside component.
defaultValue
for basic usage and value
for advanced usage, see usage demo
from next.
Thank you for your patient replies, to my shame, I didn't make the question clear:
- children v.s. props
<Select>
<Select.Option value="female">female</Select.Option>
<Select.Option value="male">male</Select.Option>
<Select.Option value="secrecy">secrecy</Select.Option>
</Select>
// Attention: Tab.Item has title
<Tab>
<Tab.Item title="Home">Home content</Tab.Item>
<Tab.Item title="Documentation">Doc content</Tab.Item>
<Tab.Item title="Help">Help Content</Tab.Item>
</Tab>
vs
<Select
dataSource={[
{ label: 'female', value: 'female' },
{ label: 'male', value: 'male' },
{ label: 'secrecy', value: 'secrecy' }
]}
/>
// Tab's dataSource seems same as Select's (with label & value, without title)
<Tab
dataSource={[
{ label: 'Home', value: 'Home content' },
{ label: 'Documentation', value: 'Doc content' },
{ label: 'Help', value: 'Help Content' }
]}
/>
The second one seems easier to remember for developers, and more testable for fusion authors.
Obviously, the first one also has some supporters, whatever, a component library can teach users how to write code, supports two usages
may increase the maintenance and communication cost, I thought it's not necessary.
- defaultValue v.s. value
I've modified the DatePicker example
defaultValue
isn't a good design in react? —— by my leader...
from next.
咦?
from next.
Related Issues (20)
- [Dialog]在 dialog 容器里 使用select 的跟随滚动会存在select弹层被覆盖的问题 HOT 2
- [Upload]Upload.Dragger的itemRender不生效 HOT 3
- [Select]Select组件怎么覆盖无障碍操作 HOT 3
- [Tree]【Tree】组件如何实现点击加载更多 HOT 2
- [Message]Message组件样式问题(icon和文字没有对齐) HOT 3
- [Upload]Upload组件手动上传第一次接口报错后,再点击上传,没有调用接口 HOT 1
- [Message]Dialog 套Message,Message的Icon 会被覆盖掉
- [Field]field.setValue支持传递值泛型 HOT 2
- [TreeSelect]label 超长后会出现没对齐的问题 HOT 2
- [Affix]有没有vue版本的 HOT 4
- [Balloon]Balloon v1,v2版本箭头距元素的间距不一致 HOT 3
- [Select]Select.AutoComplete与Field混合使用时无法在重置Field后正确重置可选项 HOT 5
- [Field]unmount custom function component but value in field still exists HOT 3
- [Table]当我使用阿里低代码引擎创建了setter,然后使用Table组件,报错:“Table”不能用作 JSX 组件。 其实例类型 "Table" 不是有效的 JSX 元素。 类型“Table”缺少类型“ElementClass”的以下属性: render, context, setState, forceUpdate 及其他 3 项。ts(2786) HOT 3
- 随便点了下官网示例就有bug。。。 HOT 2
- [Icon]页面icon白屏 HOT 3
- [DatePicker]日期选择框禁用未来日期,不支持未来的时分秒 HOT 3
- [Upload]图片上传组件只读状态添加文件下载功能 HOT 2
- [DatePicker2]Input DatePicker is not work correctly with "enter" HOT 2
- [Overlay]打开dialog导致popup和dialog的弹窗一起消失 HOT 1
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 next.