Redux-form嵌套到实际项目开发案例九

本案例是直接获取数据

|demo|----webpack.config.js|----package.json|----index.html //引入了bootstrap.css|----node_modules  //存放工具包|----src  |--------index.js //入口文件|--------actions|--------components|------------SelectingFormValuesForm.js|--------containers|------------SelectingFormValuesFormConnect.js|--------reducers|------------index.js

一、src/components/SelectingFormValuesForm.js代码

/** * @author:水痕 * @time:2017-04-12 14:05 * @email:[e-mail] * @version:1.0 * @fileName:SelectingFormValuesForm * @direction: * @title: */'use strict';import React, {Component} from 'react'import {Field, reduxForm} from 'redux-form'class SelectingFormValuesForm extends Component {    render() {        const {            favoriteColorValue, firstNameValue, lastNameValue, handleSubmit, hasEmailValue, pristine, reset, submitting        } = this.props        return (            <div className="container">                <form onSubmit={handleSubmit}>                    <div className="form-group">                        <label>第一个名称</label>                        <div>                            <Field name="firstName" component="input" type="text" placeholder="First Name"                                   className="form-control"/>                        </div>                    </div>                    {                        firstNameValue && JSON.stringify({                            'firstNameValue': firstNameValue                        },null,2)                    }                    <div className="form-group">                        <label>最后一个名称</label>                        <div>                            <Field name="lastName" component="input" type="text" placeholder="Last Name"                                   className="form-control"/>                        </div>                    </div>                    {                        lastNameValue && JSON.stringify({                            'lastNameValue': lastNameValue                        },null,2)                    }                    <div className="form-group">                        <label htmlFor="hasEmail">是否显示邮箱</label>                        <div>                            <label className="checkbox-inline">                                <Field name="hasEmail" id="hasEmail" component="input" type="checkbox"/>&nbsp;&nbsp;                                是否显示邮箱                            </label>                        </div>                    </div>                    {hasEmailValue && <div>                        <label>邮箱</label>                        <div>                            <Field name="email" component="input" type="email" placeholder="Email"                                   className="form-control"/>                        </div>                    </div>}                    <div className="form-group">                        <label>选择颜色</label>                        <div>                            <Field name="favoriteColor" component="select" className="form-control">                                <option></option>                                <option value="#ff0000">Red</option>                                <option value="#00ff00">Green</option>                                <option value="#0000ff">Blue</option>                            </Field>                        </div>                    </div>                    {favoriteColorValue && <div style={{                        height: 80,                        width: 200,                        margin: '10px auto',                        backgroundColor: favoriteColorValue                    }}/>}                    <div>                        <button type="submit" className="btn btn-success" style={{marginRight: '20px'}}                                disabled={pristine || submitting}>提交                        </button>                        <button type="button" className="btn btn-success" disabled={pristine || submitting}                                onClick={reset}>                            清除                        </button>                    </div>                </form>            </div>        )    }}SelectingFormValuesForm = reduxForm({    form: 'selectingFormValues'})(SelectingFormValuesForm)export default SelectingFormValuesForm

二、src/containers/SelectingFormValuesFormConnect.js代码

/** * @author:水痕 * @time:2017-04-12 14:06 * @email:[e-mail] * @version:1.0 * @fileName:SelectingFormValuesFormConnect * @direction: * @title: */'use strict';import {connect} from 'react-redux';import {formValueSelector} from 'redux-form';//引入展示组件import SelectingFormValuesForm from './../components/SelectingFormValuesForm';//里面填写表单的那个就可以const selector = formValueSelector('selectingFormValues')export default connect(    state => {        const hasEmailValue = selector(state, 'hasEmail')        const favoriteColorValue = selector(state, 'favoriteColor')        const firstNameValue = selector(state, 'firstName')        const lastNameValue = selector(state, 'lastName')        return {            hasEmailValue,            favoriteColorValue,            firstNameValue,            lastNameValue        }    })(SelectingFormValuesForm)

三、src/reducers/index.js代码

/** * @author:水痕 * @time:2017-04-12 14:37 * @email:[e-mail] * @version:1.0 * @fileName:index * @direction: * @title: */'use strict';import {combineReducers} from 'redux';import { reducer as formReducer } from 'redux-form';const rootReducer = combineReducers({    form: formReducer});export default rootReducer;

四、src/index.js代码

/** * @author:水痕 * @time:2017-04-12 14:04 * @email:[e-mail] * @version:1.0 * @fileName:index * @direction: * @title: */'use strict';import React from 'react'import ReactDOM from 'react-dom'import {Provider} from 'react-redux'import {createStore, applyMiddleware} from 'redux'import thunk from 'redux-thunk';import reducer from './reducers';import SelectingFormValuesForm from './containers/SelectingFormValuesFormConnect';const store = createStore(reducer, applyMiddleware(thunk));//弹出提示const showResults = values =>    new Promise(resolve => {        setTimeout(() => {            window.alert(`${JSON.stringify(values, null, 2)}`)            resolve()        }, 500)    })ReactDOM.render(    <Provider store={store}>        <SelectingFormValuesForm onSubmit={showResults}/>    </Provider>,    document.getElementById('app'))

五、index.html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"></head><body><div id="app"></div></body><script src="./index.build.js"></script></html>

六、package.json代码

{  "name": "react-demo05",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "start": "webpack-dev-server --inline --host localhost --port 3000"  },  "author": "",  "license": "ISC",  "dependencies": {    "babel-polyfill": "^6.23.0",    "html-loader": "^0.4.5",    "json-loader": "^0.5.4",    "markdown-loader": "^2.0.0",    "raw-loader": "^0.5.1"  },  "devDependencies": {    "babel-core": "^6.23.1",    "babel-eslint": "^7.2.1",    "babel-loader": "^6.3.2",    "babel-preset-es2015": "^6.22.0",    "babel-preset-react": "^6.23.0",    "react": "^15.4.2",    "react-dom": "^15.4.2",    "react-redux": "^5.0.3",    "redux": "^3.6.0",    "redux-form": "^6.6.1",    "redux-thunk": "^2.2.0",    "webpack": "^2.2.1",    "webpack-dev-server": "^2.4.1"  }}

七、webpack.config.js代码

/** * @author:水痕 * @time:2017-02-25 17:27 * @email:[e-mail] * @version:1.0 * @fileName:webpack.config * @title: */'use strict';module.exports = {    entry:{        index:'./src/index.js',    },    output:{        path:__dirname,        filename:'[name].build.js',    },    module:{        loaders:[            {                test:/\.(js|jsx)$/,                exclude:'/node_modules/',                loader:'babel-loader',                query:{                    presets:['es2015','react']                }            }        ]    },    resolve:{        extensions:['.js',".css",".jsx"]    }}