p4x666 / taro-form

仿照 ant design 的form设计的taro表单

taro-form

仿照 ant design 的form设计的taro表单，理论上和taro保持一致的兼容性，目前已验证微信小程序和h5

使用方式

1. 直接在项目中按如下方式引入

import Form, { FormSwitch, ... } from 'fe-taro-form';
import 'fe-taro-form/dist/index.css';
...
<Form ref={formRef} initialValues={{switch: true}}>
...
  <Form.Item label='FormSwitch' name='switch'>
    <FormSwitch />
  </Form.Item>
...
</Form>
...

2. 配置需要额外的经由 Taro 预设的 postcss 编译的模块。

module.exports = {
  // ...
  h5: {
    // ...
    // 经过这一配置之后，代码中引入的处于 `node_modules/fe-taro-form/` 路径下的样式文件均会经过 postcss 的编译处理。
    esnextModules: ['fe-taro-form']
  }
}

class 组件及 function 组件各自获取ref的方式

1. class 组件

import React, { Component, createRef } from 'react';
...
constructor(props) {
  super(props);
  this.formRef= createRef();
}
...
<Form ref={this.formRef}>...</Form>

2. function 组件

import React, { useRef } from 'react';
...
const formRef = useRef();
...
<Form ref={formRef}>...</Form>
...

API

Form

参数	说明	类型	默认值
ref	form 控制实例	FormInstance	-
initialValues	表单默认值，只有初始化以及重置时生效	object	-
onFieldsChange	字段更新时触发回调事件	function(changedFields)	-

Form.Item

表单字段组件，用于数据双向绑定、校验、布局等。

参数	说明	类型	默认值
name	字段名	string	-
label	label 标签的文本	ReactNode	-
getValueFromEvent	设置如何将 event 的值转换成字段值	(..args: any[]) => any	-
required	必填样式设置。如不设置，则会根据校验规则自动生成	boolean	false
rules	校验规则，设置字段的校验逻辑。	Rule[]	-
validateTrigger	设置字段校验的时机	onBlur,onChange	onBlur

被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value , onChange（或 validateTrigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

1. 你不再需要也不应该用 onChange 来做数据收集同步（你可以使用 Form 的 onFieldsChange）， onChange 被 组件内部覆盖。
2. 你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新，你需要用 setFieldValue 来更新。
3. 你不应该用 setState，可以使用 form.setFieldValue 来动态改变表单值。

FormInstance

名称	说明	类型
getFieldValue	获取对应字段名的值	(name: string) => any
getFieldsValue	获取所有字段名的值	() => any
setFieldValue	设置对应字段名的值	(name: string, value: any) => void
setFieldsValue	设置表单的值。如果你只想修改 Form.List 中单项值，请通过 setFieldValue 进行指定	(values) => void
validateField	校验指定子组件域	() => Promise
validateAllFields	校验表单所有子项	() => Promise
resetFields	重置一组字段到 initialValues	() => void

Rule

Rule 支持接收 object 进行配置，也支持 function 来动态获取 form 的数据：
更多请参考此处

名称	说明	类型
defaultField	仅在 type 为 array 类型时有效，用于指定数组元素的校验规则	rule
enum	是否匹配枚举中的值（需要将 type 设置为 enum）	any[]
fields	仅在 type 为 array 或 object 类型时有效，用于指定子元素的校验规则	Record<string, rule>
len	string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度	number
max	必须设置 type：string 类型为字符串最大长度；number 类型时为最大值；array 类型时为数组最大长度	number
message	错误信息，不设置时会通过模板自动生成	string
min	必须设置 type：string 类型为字符串最小长度；number 类型时为最小值；array 类型时为数组最小长度	number
pattern	正则表达式匹配	RegExp
required	是否为必选字段	boolean
transform	将字段值转换成目标值后进行校验	(value) => any
type	类型，常见有 string |number |boolean |url | email。	string
validateTrigger	设置触发验证时机，必须是 Form.Item 的 validateTrigger 的子集	string | string[]
validator	自定义校验，接收 Promise 作为返回值。示例参考	(rule, value) => Promise
whitespace	如果字段仅包含空格则校验不通过，只在 type: 'string' 时生效	boolean

使用示例详见 src/pages 目录下

taro-form's Issues

在useEffect中，或者useReady等函数中。setFieldsValue、setFieldValue会失效。

通过按钮点击触发 setFieldsValue ,是生效的。
但是在页面进来，想要通过此fun赋值，不起作用。
`
useEffect(() => {

if (formRef) {
  console.log('formRef: ', formRef);
  formRef.current.setFieldsValue({
    username: 'hello1'
  });
}

}, [formRef]);
`

// 此处依赖加不加formRef,都不行。

查看源码，在useFormStore.ts文件中。
setFieldsValue 函数中。
79行的fields第一次打印为{}，const [fields, dispatch] = useReducer(fieldsReducer, {});
后续才会打印出fields

导致此处dispatch 不会触发。
`
const setFieldsValue = (userFields: Record<string, any>) => {

if (!isObject(userFields)) return;
Object.keys(userFields).forEach(name => {
  if (fields.hasOwnProperty(name)) {
    dispatch({
      type: "updateValue",
      name,
      value: userFields[name]
    });
  }
});

};
`

安装 taro-form 需要装 taro-ui 吗？

当form item包裹着的组件的value是其url属性怎么办呢？有对应属性可以设置子项value的名字吗