antd form表单 自定义组件 取值，rc-form
概述
当使用 React 进行一些用户输入的行为时，我们需要拿到用户输入，即将输入框设置为受控组件，这时需要使用其他的库，我们主要使用 rc-form 这个库，它是 react 高阶 form 组件。官方文档
简书使用例子
import { createForm, formShape } from 'rc-form';class Form extends React.Component {static propTypes = {form: formShape,};submit = () => {this.props.form.validateFields((error, value) => {console.log(error, value);});}render() {let errors;const { getFieldProps, getFieldError } = this.props.form;return ({(errors = getFieldError('required')) ? errors.join(',') : null});}
}export createForm()(Form);
自己项目使用例子：
import { createForm } from 'rc-form';
const { getFieldProps,getFieldError } = this.props.form;
export default createForm()(Registration);
说明：
-
static用法。关键字static用于定义静态方法，并且不能在类的实例上调用静态方法，而应该通过类本身调用。上述例子中定义propTypes属性，不太懂？？？并且后面都没有用到这个属性的 -
通过
createForm()(Form)使得组件Form的props上挂载了一个form对象，并且这个this.props.form对象有getFieldProps、getFieldError和validateFields三个方法 -
直接在
input上挂载rc-form的属性即可将input设置为受控组件
API
createForm
getFieldProps
getFieldProps(name, option): Object { [valuePropName], [trigger], [validateTrigger] }
将会在可以支持 value 和 onChange 接口的 input 或者 inputComponent 设置 props。设置之后将会创建一个绑定在 input 上
name: String
这个 input 唯一的 name
option: Object
| Option | Description | Type | Default |
|---|---|---|---|
| option.valuePropName | 组件 value 字段的属性名称，eg. checkbox 应该设置为 checked | String | 'value' |
| option. getValueProps | 从 value 字段中获取组件 props | (value): Object | (value) => ({value}) |
| option.initialValue | 当前组件的初始值 | any | - |
| option. normalize | 返回标准化值 | (value, prev, all): Object | - |
| option.trigger | 用于收集表单数据的事件 | String | 'onChange' |
| option.validateTrigger | 被监听已验证的事件，设置为 falsy 以仅在调用 props.validateFields 时验证 | String | String[] |
| option.rules | 验证规则，详情 | Object[] | - |
| option.validateFirst | 是否停止验证这个字段的第一个 error 规则 | Boolean | false |
| option.validate | Object[] | - | |
| option.hidden | 忽略当前字段当验证或者获取这个字段时 | Boolean | false |
| option.preserve | 是否保留该值，当字段卸载并重新安装时，该值将保持不变 | Boolean | false |
| option.getValueFromEvent | 指定如何从事件中获取值 | (e): any | 详情见下面 |
option.getValueFromEvent 的默认值
function defaultGetValueFromEvent(e) {if (!e || !e.target) {return e;}const { target } = e;return target.type === 'checkbox' ? target.checked : target.value;
}
validateField
validateFields([fieldNames: String[]], [options: Object], callback: (errors, values) => void)
通过字段名验证并且获取字段值
options
options 和 async-validator 的方法相同，并且增加了 force 和 scroll
force: Boolean -> 是否验证已经验证过的字段( 由于validateTrigger引起 )，默认值是falsescroll-> 和 dom-scroll-into-view's function parameterconfig相同
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！