[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> ) ~~~