其实还是需要我们自己了解 rc-form 的设计思路的;只有了解了这些优秀开源作品的精髓,我们即使不用开源库,也可以封装自己的代码库以及类似 Ant Design 中 Form 这些优秀的组件的。 从createForm 开始 都知道我们平时编写业务组件一般只要用到表单都会用到 createForm 或者 Form.create( ) 这些方法对自己
import { createForm } from 'rc-form' @createForm({}) class App extends Component { constructor() { super(); this.state = { name: 'React' }; } onClick = () => { this.props.form.validateFields((err, value) => { console.log(value) }) ...
import{Button,Form,Input,Select}from'doraemon';import{createForm}from'./form/src';importMyInputfrom'./MyInput';constFormItem=Form.Item;constOption=Select.Option;constformItemLayout={labelCol:{span:4},wrapperCol:{span:20},};constDemo=props=>{const{form}=props;const{getFieldDecorator}=form;co...
rc-form源码浅析最近在react工程中用到了antd,想学习一下其中form表单的实现原理;antd的form组件是在rc-form的基础上进行封装的,因此本文主要就以下几个点针对性的看了一下rc-form的源码。 在每次使用form时,…
前段时间因为公司需要做比较复杂的表单校验,多层嵌套和动态form组件创建,为了能够写出更好的form表单组件我特意去看了下他底层 源码, Rc-Form其实就是阿里ant design form的底层源码,今天我们来学习下Rc-Form源码分析,学习完以后我们在使用ant design form 会更加游刃有余。
rc-form React 高阶表单控制组件。 开发 npm install npm start open http://localhost:8000/examples/ 特征 支持react.js 和 react-native 使用async-validator校验字段 安装 使用 import { createForm, formShape }from'rc-form';classForm extends React.Component {staticpropTypes ={ ...
import{ createForm }from'rc-form';classFormextendsReact.Component{ componentWillMount() {this.requiredDecorator =this.props.form.getFieldDecorator('required', {rules: [{required:true}], }); } submit =()=>{this.props.form.validateFields((error, value) =>{console.log(error, value); }); ...
nbsp; this.props.onChange(this.state.value) });}render() ...
antd-form-demo antd-form底层使用rc-form进行表单操作,这里主要分析rc-form流程。 调用Form.create()(MyForm) 产生一个新容器组件Form,内置getFieldDecorator等属性和方法。 复制被包裹组件的静态属性到新组建中。 执行声明周期事件,主要是: getInitialState 初始化默认的field,这里默认无 render函数返回原始组件(被...
// 根据item规则渲染你的组件,从form里结构出getFieldProps||getFieldDecorator进行使用。 // 比如我们使用getFieldProps // 做一个判断比如说是select组件: if (item.selectData) { // 笔者在这里演示定义的columns大概是这样的: // {id: 'xxx', label: 'xxx', selectData: [], rules: []} ...