本案例是直接获取数据
|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"/>
是否显示邮箱
</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"]
}
}