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:332904234@qq.com
 * @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:332904234@qq.com
 * @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:332904234@qq.com
 * @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:332904234@qq.com
 * @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:332904234@qq.com
 * @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"]
    }
}