【antd】输入控件的思想

antd对于form中输入控件的抽象十分简单，只要能接收value和onChange属性的组件都可以成为Form.Item的子组件，为Form对应的字段提供值。对于输入控件的抽象我认为这已经达到了极致，事件（onChange）产生值（value）。事件向上，值向下，完全符合React哲学。

如何实现一个标准的输入组件？

对于输入组件首先需要具备接收value和onChange属性的能力，这两个属性被提供的情况下这个组件被称为受控组件，它受到父组件控制，状态来自父组件。当父组件没有提供value的情况下该组件是非受控组件，有自己的状态。

是否受控主要取决于value属性是否提供，因为value决定了组件当前的状态，当前状态被父组件控制，所以称之为受控组件。

输入组件的状态是会改变的，最常见的方式就是来自用户行为，例如在input中输入内容，该组件的状态(value)就会改变。

因为组件可以作为非受控组件，所以组件自身有innerValue和setInnerValue用于展示和响应用户输入。
如果父组件没有提供value
1. 组件使用自身的setInnerValue响应用户输入，改变自身状态innerValue
2. 如果父组件提供onChange，在setInnerValue同时触发onChange事件通知父组件
如果父组件提供了value，组件失去了决定自身状态的能力（自身不会直接响应用户输入）
1. 如果父组件提供onChange函数，则使用该函数响应用户输入
2. 组件自身的setInnerValue不会响应用户输入（setInnerValue的作用是修改innerValue，因为有父组件的value，innerValue会响应value的变化，所以setInnerValue不应该直接修改innerValue导致其和value不一致）

function Input (props) {const [innerValue, setInnerValue] = useState(props.value);useEffect(() => {if ('value' in props) setInnerValue(props.value)}, [props.value])function handleChange (ev) {if (!('value' in props)) {setInnerValue(ev.target.value)}props.onChange?.(ev.target.value)}return <input value={innerValue} onChange={handleChange} />
}

【antd】输入控件的思想相关推荐

INFO：InstallShield InstallScript工程中自定义界面文本输入控件的两个注意事项
在使用InstallScript工程增加自定义界面过程中,我用到了文本输入控件(Edit Field),用于用户名和密码的输入. 首先是用户名,如果用户名长度超过我的控件长度时,发现无法再继续输入内容 ...
WPF IP地址输入控件的实现
WPF IP地址输入控件的实现原文:WPF IP地址输入控件的实现一.前言 WPF没有内置IP地址输入控件,因此我们需要通过自己定义实现. 我们先看一下IP地址输入控件有什么特性: 输满三个数字焦 ...
正则表达式——WPF输入控件TextBox 限定输入特定字符
正则表达式--WPF输入控件TextBox 限定输入特定字符原文:正则表达式--WPF输入控件TextBox 限定输入特定字符概念: 正则表达式是对字符串操作的一种逻辑公式, 就是用事先定义好的一 ...
jquery-文档操作-标签取值-输入控件取值与赋值
html 文本值获取标签包裹的内容 dom的属性 jquery的方法演练小结 dom对象,jquery对象,取值方式的对等对象纯文本 html文本 dom innerText innerH ...
一起学Windows Phone7开发(十三.三输入控件)
在Phone7中主要的输入控件其实就有两个,一个是textbox,另一个就是password控件.这两个控件中尤其是TextBox控件有了很多新特性. 一.PasswordBox: 密码框控件,用 ...
给大家介绍一个日期输入控件javascript实现，我修改了下，符合我的习惯了，^_^！...
最终效果如图: <formname="form1"method="post"action=""> <p> <i ...
php支付密码控件,Android高仿微信支付密码输入控件实例代码
这篇文章主要为大家详细介绍了Android高仿微信支付密码输入控件的具体实现代码,供大家参考,具体内容如下像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现 ...
ExtJS4.2学习(17)表单基本输入控件Ext.form.Field（转）
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html --------------- ...
创建输入控件(input控件、文本框、密码框、单项选择、多项选择、重置与提交按钮的设置)
创建输入控件 input控件的相关概念 input控件的属性 input控件的类型文本框的设置密码框的设置单项选择的设置多项选择的设置重置与提交按钮的设置综合运用相关概念选择题及参考答案 ...

【antd】输入控件的思想

【antd】输入控件的思想相关推荐

最新文章

热门文章