Gathering detailed insights and metrics for @alifd/field
Gathering detailed insights and metrics for @alifd/field
Fields can be used to manage data when it comes to form data manipulation and validation. After being associated with a component, the form data can be automatically written back, read, and verified.
Installations
npm install @alifd/fieldDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
18.18.2
NPM Version
9.8.1
Releases
15
Languages
3
TypeScript
JavaScript
HTML
TypeScript (98.84%)
JavaScript (0.98%)
HTML (0.17%)
Developer
alibaba-fusion
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
28 Stars
167 Commits
12 Forks
5 Watchers
25 Branches
21 Contributors
Updated on Mar 03, 2025
Maintainers
30
Package Meta Information
Latest Version
2.0.4
Package Id
@alifd/field@2.0.4
Unpacked Size
1.98 MB
Size
422.66 kB
File Count
35
NPM Version
9.8.1
Node Version
18.18.2
Published on
Mar 03, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
39
@alib/build-scripts@alifd/eslint-config-next@alifd/next@commitlint/cli@types/chai@types/react@types/react-dom@typescript-eslint/eslint-plugin@typescript-eslint/parser@vitejs/plugin-reactbuild-plugin-componentbuild-plugin-fusionbuild-plugin-moment-localeschaicypressenzymeenzyme-adapter-react-16es6-promise-polyfilleslinteslint-config-prettiereslint-plugin-cypresseslint-plugin-importeslint-plugin-markdowneslint-plugin-reacteslint-plugin-tsdochuskylint-stagedmochamomentprettierprop-typesreactreact-domreact-reduxreduxsemantic-releasesinontypescriptvite
Field
- category: Components
- family: DataEntry
- chinese: 表单辅助工具
- cols: 1
- type: 表单
开发指南
何时使用
涉及到表单数据操作、校验的地方都可以用 Field 来管理数据。和组件关联后可以自动对表单数据进行回写、读取、校验。
使用注意
- 使用 Field
init过的组件,valueonChange必须放在 init 的第三个参数, 否则有可能被 init 覆盖。 Form已经和Field在数据获取和自动校验提示方面做了深度优化，建议在Form中使用Field, 请查看 Form demo。- initValue 类似组件的 defaultValue 只有在组件第一次 render 的时候才生效(ajax 异步调用设置 initValue 可能已经错过了第一次 render)
- autoUnmount 默认打开的，如果需要保留会
自动卸载的组件数据请关闭此项 parseName=true可以通过getValues获取到结构化的数据, 但是 getValue 还是必须传完整 key 值
基本使用
class Demo extends React.Component {
field = new Field(this); // 实例创建
onClick = ()=>{
console.log(this.field.getValue('name'));
}
render() {
const init = this.field.init;
// 注意：initValue只会在组件第一次初始化的时候被赋值，如果你是异步赋值请用setValue
return <div>
<Input {...init('name',{initValue:'first value'})} />
<button onClick={this.onClick>获取数据</button>
</div>
}
}
更新数据
事件更新
class Demo extends React.Component {
field = new Field(this);
onClick = ()=>{
this.field.setValue('name', 'newvalue'); // 赋值会自动触发render
}
render() {
const init = this.field.init;
return <div>
<Input {...init('name')} />
<button onClick={this.onClick}>设置数据</button>
</div>
}
}
props 更新
class Demo extends React.Component {
field = new Field(this);
// 在组件挂载之前把数据设置进去(可以用initValue替代这种用法)
componentWillMount() {
this.field.setValue('name', 'init Name')
}
// 接收来自props的数据
componentWillReceiveProps(nextProps) {
this.field.setValue('name', nextProps.name)
}
render() {
const init = this.field.init;
return <div>
<Input {...init('name')} />
</div>
}
}
ajax 更新
class Demo extends React.Component {
field = new Field(this);
onClick = ()=>{
Ajax({
url:'/demo.json',
success:(json)=>{
// 回调事件中赋值更新
this.field.setValue('name',json.name);
}
});
}
render() {
const init = this.field.init;
return <div>
<Input {...init('name')} />
<button onClick={this.onClick}>设置数据</button>
</div>
}
}
onChange 更新监控
两种用法：
- 统一管理
class Demo extends React.Component {
field = new Field(this,{
onChange:(name, value) => {
switch(name) {
case 'name1':
this.field.setValue('name2','value set by name1');
break;
case 'name2':
this.field.setValue('name1','value set by name2');
break;
}
}
});
render() {
const init = this.field.init;
return <div>
<Input {...init('name1')} />
<Input {...init('name2')} />
</div>
}
}
- 各自管理
class Demo extends React.Component {
render() {
const init = this.field.init;
return <div>
<Input {...init('name1',{
props:{
onChange:(v)=>{
this.field.setValue('name2','value set by name1');
}
}
})} />
<Input {...init('name2',{
props:{
onChange:(v)=>{
this.field.setValue('name1','value set by name2');
}
}
})} />
</div>
}
}
详细请查看 demo 演示 关联控制
API
初始化
let myfield = new Field(this [,options]);
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| this | 传入调用 class 的 this | React.Component | 必须设置 | |
| options | 一些事件配置, 详细参数如下 | Object | 非必须 |
options 配置项
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| onChange | 所有组件的 change 都会到达这里[setValue 不会触发该函数] | Function(name,value) | |
| parseName | 是否翻译init(name)中的name(getValues 会把带.的字符串转换成对象) | Boolean | false |
| forceUpdate | 仅建议 PureComponent 的组件打开此强制刷新功能，会带来性能问题(500 个组件为例：打开的时候 render 花费 700ms, 关闭时候 render 花费 400ms) | Boolean | false |
| autoUnmount | 自动删除 Unmout 元素，如果想保留数据可以设置为 false | Boolean | true |
| autoValidate | 是否修改数据的时候就自动触发校验, 设为 false 后只能通过 validate() 来触发校验 | Boolean | true |
| values | 初始化数据 | Object |
API 接口
new之后的对象提供的 api 接口 （例：myfield.getValues()）(set 开头的 api 函数不要在 render 里面操作, 可能会触发死循环)
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| init | 初始化每个组件，详细参数如下） | Function(name:String, option:Object) | ||
| getValues | 获取一组输入控件的值，如不传入参数，则获取全部组件的值 | Function([names: String[]]) | ||
| getValue | 获取单个输入控件的值 | Function(name: String) | ||
| setValues | 设置一组输入控件的值（会触发 render，请遵循 react 时机使用) | Function(obj: Object) | ||
| setValue | 设置单个输入控件的值 （会触发 render，请遵循 react 时机使用) | Function(name: String, value) | ||
| validate | 校验并获取一组输入域的值与 Error | Function([names: String[]], [options: Object], callback: Function(errors, values)) | ||
| getError | 获取单个输入控件的 Error | Function(name: String) | ||
| getErrors | 获取一组输入控件的 Error | Function([name: String]) | ||
| setError | 设置单个输入控件的 Error | Function(name: String, errors:String/Array[String]) | ||
| setErrors | 设置一组输入控件的 Error | Function(obj: Object) | ||
| reset | 重置一组输入控件的值、清空校验 | Function([names: String[]]) | ||
| resetToDefault | 重置一组输入控件的值为默认值 | Function([names: String[]]) | ||
| getState | 判断校验状态 | Function(name: String) | 'error' 'success' 'loading' '' | '' |
| getNames | 获取所有组件的 key | Function() | ||
| remove | 删除某一个或者一组控件的数据，删除后与之相关的 validate/value 都会被清空 | Function(name: String/String[]) | ||
| addArrayValue | 添加 name 是数组格式的数据, 并且自动处理其他 name 的数组错位问题 | Function(key: String, index: Number, value1, value2, ...) | ||
| deleteArrayValue | 删除 name 是数组格式的数据, 并且自动处理其他 name 的数组错位问题 | Function(key: String, index: Number, howmany) | ||
| watch | 监听字段值变化 | Function(names: String[], value: unknown, oldValue: unknown, triggerType: 'init' | 'change' | 'setValue' |
init
init(name, options, props)
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| id | 自定义的表单域 id，如不提供则使用 name 替代 | String | ||
| name | 必填输入控件唯一标志 | String | ||
| options.valueName | 组件值的属性名称，如 Checkbox 的是 checked，Input 是 value | String | 'value' | |
| options.initValue | 组件初始值(组件第一次 render 的时候才会读取，后面再修改此值无效),类似 defaultValue | any | ||
| options.trigger | 触发数据变化的事件名称 | String | 'onChange' | |
| options.rules | 校验规则 | Array/Object | ||
| options.getValueFormatter | 自定义从组件获取 value 的方式，详细用法查看 demo 自定义数据获取 | Function(value,...args) 参数顺序和组件的 onChange 完全一致 | ||
| options.setValueFormatter | 自定义转换 value 为组件需要的数据 ，详细用法查看 demo 自定义数据获取 | Function(value) | ||
| props | 组件自定义的事件可以写在这里 | Object | ||
| autoValidate | 是否修改数据的时候自动触发校验单个组件的校验, 设为 false 后只能通过 validate() 来触发校验 | Boolean | true |
返回值
{id,value,onChange}
rules
{
rules:[{ required: true }]
}
多个 rule
{
rules:[{required:true,trigger:'onBlur'},{pattern:/abcd/,message:'abcd不能缺'},{validator:(rule, value, callback)=>{callback('出错了')}}]
}
| 参数 | 说明 | 类型 | 可选值 | 使用类型 |
|---|---|---|---|---|
| required | 不能为空 | Boolean | true | undefined/null/“”/[] 会触发此规则) |
| pattern | 校验正则表达式 | 正则 | ||
| minLength | 字符串最小长度 / 数组最小个数 | Number | String/Number/Array | |
| maxLength | 字符串最大长度 / 数组最大个数 | Number | String/Number/Array | |
| length | 字符串精确长度 / 数组精确个数 | Number | String/Number/Array | |
| min | 最小值 | Number | String/Number | |
| max | 最大值 | Number | String/Number | |
| format | 对常用 pattern 的总结 | String | url、email、tel、number | String |
| validator | 自定义校验,(校验成功的时候不要忘记执行 callback(),否则会校验不返回) | Function(rule,value,callback) | ||
| trigger | 触发校验的事件名称 | String/Array | onChange/onBlur/... | onChange |
| message | 出错时候信息 | String |
自定义组件接入 Field 标准
-
支持受控模式(value+onChange)
必须- value 控制组件数据展现
- onChange 组件发生变化时候的回调函数（第一个参数可以给到 value)
-
一次完整操作抛一次 onChange 事件
建议比如有 Process 表示进展中的状态，建议增加 APIonProcess；如果有 Start 表示启动状态，建议增加 APIonStart -
value={undefined}的时候清空数据, field 的 reset 函数会给所有组件下发 undefined 数据建议
componentWillReceiveProps(nextProps) {
if ('value' in nextProps ) {
this.setState({
value: nextProps.value === undefined? []: nextProps.value // 设置组件的被清空后的数值
})
}
}
已知问题
- 为何手动调用
this.field.validate的时候进不了回调函数？ 答: 是不是自定义了 validator 方法,确保callback在任何分支下都能被执行到。
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 7/24 approved changesets -- score normalized to 2
Reason
dependency not pinned by hash detected -- score normalized to 2
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/alibaba-fusion/field/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/alibaba-fusion/field/test.yml/master?enable=pin
- Warn: downloadThenRun not pinned by hash: .github/workflows/test.yml:22
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 1 out of 1 npmCommand dependencies pinned
- Info: 0 out of 1 downloadThenRun dependencies pinned
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 18 are checked with a SAST tool
Reason
82 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-2j2x-2gpw-g8fm
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-hj9c-8jmm-8c52
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-x2pg-mjhr-2m5x
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-qxg5-2qff-p49r
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
- Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
- Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
- Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
- Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
- Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
3.1
/10
Last Scanned on 2025-07-14
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More