## 一、简介 > 此项目为使用官方create-react-app 脚手架搭建的简易项目，旨在熟悉react及antd语法，api等。 >[ antd文档地址](http://1x.ant.design/components/) - 目录结构如下： ``` |__ node_modules |__public |__ index.html |__ favicon.ico |__ init.js |__ manifest.json |__ src |__ component |__ css |__ images |__ less |__ index.js |__ registerServiceWorker.js |__ App.js |__package.json |__ README.md ``` > 由于官方脚手架对less，sass等预编译工具默认是不支持的，虽然其提供了解决办法，但为了简单，还是直接使用了Koala工具一线转换 ## 二、项目中问题记录 ### 1、antd的Form组件以及表单验证 > 组件基本构造： - `Form`为antd提供的form容器组件，表单组件还有Input,Select等 - `Form.Item`为form组件的表单项容器 - `label`：对应表单项的名称 ``` import {Form,Input,Button,Icon} from 'antd' class Form extends React.Component{ render(){ const FormItem = Form.Item; const formItemLayout = { labelCol: { span: 6 }, wrapperCol:{span:14}, } return ( {/*prefixCls：自定义表单className*/} <Form horizontal="true" prefixCls="loginForm"> <FormItem label="手机号" {...formItemLayout} > <Input addonBefore={<Icon type="mobile" />} placeholder="请输入手机号"/> </FormItem> </Form> ) } } ``` - label：label标签的文件 - `labelCol`：label标签布局，同`Col`组件，设置`span、offset`值，如`{span:3,offset:12}` - `wrapperCol`：需要为输入控件设置布局样式时，使用该属性，用法同labelCol > 表单验证 - 验证规则设置 - 待表单项对应规则 - 提交事件处理函数 ``` import {Form,Input,Button,Icon} from 'antd' class Form extends React.Component{ // 提交处理函数 handleSubmit(e) { e.preventDefault(); this.props.form.validateFields((errors, values) => { if (!!errors) { console.log('Eorros in form!!') return; } console.log('提交成功！！') console.log(values); }) } //自定义验证规则 checkTel(rule, val, cb) { const telReg = /^1[3456789]\d{9}$/ if (val && telReg.test(val)) { console.log('验证成功') cb() } else { cb(new Error('请输入正确的手机号哦')) } } render(){ const FormItem = Form.Item; const formItemLayout = { labelCol: { span: 6 }, wrapperCol:{span:14}, } // 获取Form组件验证相关方法 const { getFieldProps, getFieldError, isFieldValidating } = this.props.form; // 验证规则 const telProps = getFieldProps('tel', { rules: [ { required: true, min: 11, message: '请填写手机号' }, {validator:this.checkTel} ] }) return ( {/*prefixCls：自定义表单className*/} <Form horizontal="true" prefixCls="loginForm"> <FormItem label="手机号" {...formItemLayout} hasFeedback help={isFieldValidating('tel')?'校验中':(getFieldError('tel')||[]).join(',')} > <Input {...telProps} addonBefore={<Icon type="mobile" />} placeholder="请输入手机号"/> </FormItem> </Form> ) } } ``` - `getFieldProps(id,options)`:用于和表单进行双向绑定,详见antd文档描述（其中options的rules为校验规则） - `isFieldValidating`:判断一个输入控件是否在校验状态 - `getFieldError`获取某个输入控件的Error - `hasFeedback` :展示检验状态图标，建议只配合Input组件使用 - `help`：提示信息，如不设置，则会根据校验规则自动生成 ### 2、表单提交及隐藏登录模态框 > 场景：在一个Modal框中，有两个tab，一个是Login组件，一个是Register组件，都是表单，用于用户注册和登录。现在的需求是：在Login组件内，填入信息点击登录请求后，当返回`登录成功时`，隐藏父组件Modal框 ``` |__ 父组件： Modal （自身方法 modalOk隐藏自己） |__ 子组件1 ： Login 登录 |___ 发出登录请求，成功后，隐藏Modal。 |__ 子组件2 ： Register 注册 ## 伪代码实现 class Modal extends Component{ constructor(){ super(); this.state={ modalVisible:false } } hideModal(){ this.setState({ modalVisible:false }) } showModal(){ this.setState({modalVisible:true}) } render(){ return(){ <Modal visible={this.state.modalVisible}> <Tabs defaultActiveKey="1" size="small"> <TabPane tab="登录" key="1"> <LoginForm onSubmit={this.hideModal.bind(this)}/> </TabPane> <TabPane tab="注册" key="2"></TabPane> </Tabs> </Modal> } } } class LoginForm(){ constructor(){ super(); } submitForm(){ ...... // 成功请求后，隐藏父Modal this.onSubmit(); } } ```