[TOC] ### 获取Form中的字段 ~~~ const { form } = this.props; //在下面要引入 const url = form.getFieldValue('url'); ~~~ 使用 ~~~ render() { const { getFieldDecorator, getFieldValue } = this.props.form return ( <Form> <FormItem {...formOneItemLayout} label='服务名称'> {getFieldDecorator('servicename', { //required表示必须要验证默认为false，错误的时候显示message rules: [{ required: true, message: '请输入服务名称！' }, matchWordAndNum()], //默认值 initialValue: record.servicename, })(<Input placeholder={"请输入服务名称..."} />)} </FormItem> </Form> ) } export default Form.create()(ServiceModal); //matchWordAndNum()为函数通过正则对字段进行校验(在utils中创建js文件) export function matchWordAndNum(message = "请输入有效字符...", pattern = /^[\u4E00-\u9FA5A-Za-z0-9]+$/) { return { message, pattern } } ~~~ ### FormItem中校验参数 ~~~ //表示校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' validateStatus: this.state.checkedUrl ? 'success' : 'error', //提示信息，如不设置，则会根据校验规则自动生成 help: this.state.help, ~~~ ~~~ //校验信息成功或者失败都会提示信息 render() { const formThreeLayout = { labelCol: { span: 10 }, wrapperCol: { span: 14 } } const urlCheckTips = { validateStatus: this.state.checkedUrl ? 'success' : 'error', help: this.state.help, }; return ( <Form> <FormItem {...formOneItemLayout} {...urlCheckTips} label='服务地址'> </FormItem> </Form> )} ~~~ ### Form配合label布局使用 ~~~ <Form> <Row gutter={24}> <Col span={8}> <FormItem {...formThreeLayout} label='是否为底图'> {getFieldDecorator('isbasemap', { })(<Switch defaultChecked={record.isbasemap === 1} />)} </FormItem> </Col> </Row> </Form> ~~~ ### props.children 和容器类组件 ~~~ 1. 把组件当做容器，组件当中可以放标签（如：<Model><a>添加</a></Mode>）此时的a标签内容就可在model组件中使用props.children 2. 使用场景:将组件和元素绑定在一起 3. 出现props.children的原因：为了 实现代码分离，功能模块化 ~~~ ~~~ <ServiceModal modalType={consts.ServiceModalType.ServiceEdit.title} record={record} serviceType={this.props.serviceType} serviceType2={this.props.serviceType2} onOk={this.props.modifyService} checkServiceUrl={this.props.checkServiceUrl} > <a>编辑</a> </ServiceModal> //ServiceModal return ( <div> <span onClick={this.renderConfigModal.bind(this)}> {this.props.children} </span> </div> ) ~~~