antdesign react（antdesign怎么集合react-redux对input控件进行初始化赋值）

本文目录

• antdesign怎么集合react-redux对input控件进行初始化赋值
• React使用Ant Design Mobile结合rc-form进行表单验证
• React降级配置（1.x）及less、Ant Design配置详解
• antDesign+react 实现选择不同的下拉框出现不同的组件

antdesign怎么集合react-redux对input控件进行初始化赋值

　　在Redux 应用中使用路由功能，可以搭配使用 React Router 来实现。 Redux 和 React Router 将分别成为数据和 URL 的事实来源（the source of truth）。 在大多数情况下， 最好将他们分开，除非需要时光旅行和回放 action 来触发 URL 改变。　　1、需要从 React Router 中导入 和 。代码如下：　　import { Router, Route, browserHistory } from ’react-router’;　　在 React 应用中，通常需要会用 包裹 。 如此，当 URL 变化的时候， 将会匹配到指定的路由，然后渲染路由绑定的组件。 用来显式地把路由映射到应用的组件结构上。 用 path 指定 URL，用 component 指定路由命中 URL 后需要渲染的那个组件。　　const Root = （） =》 （　　　　　　　　）；　　另外，在 Redux 应用中，仍将使用 。 是由 React Redux 提供的高阶组件，用来让开发者将 Redux 绑定到 React 。　　然后，开发者从 React Redux 导入 ：　　import { Provider } from ’react-redux’;　　开发者将用 包裹 ，以便于路由处理器可以访问 store。　　const Root = （{ store }） =》 （　　　　　　　　　　　　）；　　2、渲染组件　　现在，如果 URL 匹配到 ’/‘，将会渲染 组件。此外，开发者将在 ’/’ 后面增加参数 （：filter）， 当尝试从 URL 中读取参数 （：filter），需要以下代码：　　　　也可以将 ’#’ 从 URL 中移除（例如：）。 开发者需要从 React Router 导入 browserHistory 来实现：　　import { Router, Route, browserHistory } from ’react-router’;　　然后将它传给 来移除 URL 中的 ’#’：　　　　　　　　只要开发者不需要兼容古老的浏览器，比如IE9，你都可以使用 browserHistory。　　components/Root.js　　import React, { PropTypes } from ’react’;　　import { Provider } from ’react-redux’;　　import { Router, Route, browserHistory } from ’react-router’;　　import App from ’./App’;　　const Root = （{ store }） =》 （　　　　　　　　　　　　）；　　Root.propTypes = {　　store: PropTypes.object.isRequired,　　};　　export default Root;

React使用Ant Design Mobile结合rc-form进行表单验证

rc-form是什么：

在使用Ant Design Mobile的InputItem文本输入时提示"受控组件建议使用rc-form"，那么这个rc-from究竟是什么呢？

答：rc-form是一个将输入框变为受控组件的库，也是一个React的高阶form组件。它集合了对于输入框的各种方法，可以使我们方便的控制输入框的状态。

使用方法 ：

首先安装并导入rc-form库引入createForm方法，然后使用createForm()在组件’CountSet’上挂载form对象，即在当前组件的props上挂在了form，通过使用props.form.相关方法，即可调用rc-form中定义的方法。

API:

validateFields( ,,*callback(errors, values)******) =》 void *****校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件。

getFieldsValue( * ) 获取一组控件的值，若 fieldNames 参数为空，则获取全部组件。*

getFieldsError( * ) 获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error。*

getFieldProps( name,options ) 用于为控件绑定名称(key)，及控件的一些默认配置。其中options参数简单说两个 initialValue和 rules，initialValue是控件的默认初始值绑定在name上；rules是对输入框的内容做一些限制，比如是否必须输入(require)，最大(max)最小(min)长度等,也可以自定义限制(validator：function(rule, value, callback))。

一个例子：

React降级配置（1.x）及less、Ant Design配置详解

***隐藏网址***

create-react-app xxx 注：xxx 是 目录名称，英文小写，可用“-”或“_”

注意：react-scripts是2.1.2版本，只兼容IE11以上；为了更好地兼容IE浏览器，我们需要做降级配置

cd xxx 注意： 之所以要在master分支下进行配置，是为了在 下文 中运行 npm run eject

npm uninstall react-scripts -S

npm i react-scripts@1.x -S

git init git add . git commit -m ’初始化项目’

npm run eject

rm -rf node_modules

npm i less less-loader -S 我自己做项目的时候把axios也安装上了

注：新版本的react-sricpts@2.x+ 是在npm run eject 之后，把webpack.config.dev.js和webpack.config.prod.js合并成一个了，跟本文配置方法不一样。

此时配置的less已经生效

在项目根目录下：

npm i antd -S

npm i babel-plugin-import -S

以下是可以配置的样式变量

antDesign+react 实现选择不同的下拉框出现不同的组件

在选择不同的下拉框的时候出现不同的组件，具体的实现效果就是： 我具体的做法是，在第一个下拉框作为一个控制组件，后面的显示结果通过判断第一个下拉框选择的不同值进行显示的划分。 首先先对第一个组件进行封装,，该文件的文件名的index.js： 现在我们对子组件进行封装，子组件的文件名为SwitchInterval.js ：