1.使用getFieldDecorator <FormItem label="手机号" > {getFieldDecorator('phone', { initialValue: contactDetail.phone, rules: [ { required: true, message: '请输入手机号' }, { pattern: /^1\d{10}( 1\d{10})*$/, message: '手机号格式不正确', }, ], })(<Input place

StyleCop下载地址:http://stylecop.codeplex.com/ -Documentation Rules 文档化注释规则 -Element Documentaion 变量的文档化注释 -File Headers 文件头部 -Layout Rules 布局规则 -Curly Brackets 花括号位置 -Line Spacing 行距 -Maintainability Rules 稳定性规则 -Access Modifier 访问修饰符 -Dubug Test 调试信息 -

getFieldsError()方法其实只有required:true时,双向数据绑定. {getFieldDecorator('note', { rules: [{ required: true, message: 'Please input your note!' }], })(<input/>)} 遇到一个需求,表单没有填写任何搜索条件搜索按钮置灰: 做法如下: import React, { Component } from 'react'; import {Form, Input,

引用form是第三方插件ant插件,官网网址:https://ant.design/.用到的antd的版本是@2.0.1.form(https://ant.design/components/form/)表单页面的大概样子如下:

当input输入了空格是不会提示信息的 一般会去除空格然后进行验证 这个时候就要添加onkeyup事件去除左侧的空格 验证只输入空格通过验证 //添加验证手机方法 jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; return this.opti

ruels方法 1说明:查看.新增.移除一个表单控件的验证规则 2使用: 表单控件.rules(); 参数: rules() 返回元素的验证规则 rules('add',rules) 增加验证规则 rules('remove',rules) 删除验证规则 valid()方法 1.介绍 检查表单是否验证通过 2.使用 表单jQuery对象.valid() 增加的选择器 :blank 选择所有没有值或者值为空白的的表单对象 :filled 选择所有非空的表单空间,和上面的相反 :unchecked

前提条件:node和ruby on rails必须已经安装好(相关安装流程不再此处介绍) 1.nvm.node 2.npm or yarn装一个就好 3.rvm.ruby on rails 4.foreman 一.新建一个rails项目后加入react gem包 1.Gemfile文件添加gem 'react_on_rails', '~>6' # use latest gem version > 62.bundle install安装gem包3.rails generate react_on_

好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有快速目录的地方写的,之前是分为了10个文件) 所使用的一些包可能进过不断的迭代升级已不支持 01.初始化项目(安装需要的包) //生成package.json npm init 安装基础包 npm install react react-dom --save npm install webpack@

第一步: 要做一个electron项目,理论上我们应该从electron-quick-start开始,就是说我们需要如下3个文件: package.json,node工程最基本的要求,类似于Java的pom.xml main.js 创建窗口,工作在electron的主进程 index.html 页面,工作在electron的渲染进程 但由于我们要使用antd, antd基于react,它是一个react工程,所以我们从最简单的react工程 create-react-app开始,为什么不用ant

之前的几篇博客是将flask 结合 antd本地化,但是这样使得antd无法按需加载(也不支持ES6的语法),而且在写的过程中还需要把每个组件都用antd对象,这样的做法虽然是实现了antd的本地化,但是无法最大化的使用antd组件库,最好的方式就是官网上的组件代码直接拿过来用就行,今天所做的就是这个功能. 首先是借用Webpack ,它是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需

相信大家在使用nextjs的时候,难免遇到一些坑.其实可能大部分原因在于 nextjs 做了很多封装,我们可能不能第一时间搞清楚包括它相关的所有配置,比如其中的webpack配置.我前面也写过 SSR 实现的文章和简单的轮子<实现ssr服务端渲染>,也知道 SSR 要实现为 nextjs 这样的三方框架,还是会需要经历很复杂编码的. 总归有时候遇到问题,在网上也查不到一个正确的解决方案.比如,我为此头痛几天的 antd-mobile 按需加载,最开始我无法正常使用,就只能全局引入 antd-m

当我们初入vue.js的时候.使用cli脚手架快速创建项目的时候: 如果语法格式错误(这里主要指的是:空格多少引起的问题)!! 找到  webpack.base.config.js文件注释掉下面的东西!! var path = require('path') var utils = require('./utils') var config = require('../config') var vueLoaderConfig = require('./vue-loader.conf') func

<template> <el-form :model="unuseForm" label-position="top" :rules="dialogRules"> <el-form-item label="原因" prop="loseEfficacyReason"> <el-input type="textarea" v-model="

eslint检查代码风格是好的,不过 有些换行报错   空格报错  还有在代码中有 console也是报错   这有些烦人 为了把这些烦人的报错给禁止掉 我们可以在package.json文件中 找到 "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential",

webpack配置 webpack.config.dev.js, webpack.config.prod同理. 'use strict'; const autoprefixer = require('autoprefixer'); const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const Case

Rules 为了让你对规则有个更好的理解,ESLint 对其进行了分门别类. 所有的规则默认都是禁用的.在配置文件中,使用 "extends": "eslint:recommended" 来启用推荐的规则,报告一些常见的问题,在下文中这些推荐的规则都带有一个标记. 命令行的 --fix 选项用来自动修复规则所报告的问题(目前,大部分是对空白的修复),在下文中会有一个的图标. Possible Errors 这些规则与 JavaScript 代码中可能的错误或逻辑错误

痛点 在使用antd的表单时,大家觉得不够清爽,总结如下: 大量的模板语法,需要一定的学习成本. 需要手动地进行数据绑定,使用大量的onChange/setFieldsValue去控制数据. 无法通过state动态地控制表单. 提交表单时,需要将props.form的数据和其他数据组合. 表单联动时处理复杂.   解决方向 现状 类比Angular与Vue,大家觉得双向绑定的模式,在表单的开发中是比较好的,所以如果能将表单的数据直接绑定到state上,那么react的开发表单就会相对高效一些.

import React from 'react'; import {Form, InputNumber, Input, DatePicker, Button, Select, Icon} from 'antd'; import moment from 'moment'; // 推荐在入口文件全局设置 locale import 'moment/locale/zh-cn'; moment.locale('zh-cn'); import PageTitle from "component/page

import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { Form, InputNumber, Input, DatePicker, Button, Select } from 'antd'; import moment from 'moment'; // 推荐在入口文件全局设置 locale import 'moment/locale/zh-cn'; moment.locale('z

Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:"dva 是 react 和 redux 的最佳实践". Antd 是阿里的一套开箱即用的中台前端/设计解决方案,UI框架. Umi 一套可插拔的企业级 react 应用框架,同样由dva作者 sorrycc 完成.他在Umi中引入了 UI 工具 antd,打包工具 roadhog,路由 react-router和状态管理器 dva,做到了可插拔机制. Dva 初实践 一