功能分析:
在网页上显示两个个姓名及年龄的输入框及一个提交按钮,并让输入框的内容同步到网页上显示;
抽离前:
class App extends Component {
state={name:'Guo努力',age:22}
//同步数据
handleChange1=(e)=>{
this.setState({
name:e.target.value
})
}
handleChange2=(e)=>{
this.setState({
age:e.target.value
})
}
//提交数据
handleClick=()=>{
const {name,age}=this.state
//...
}
render() {
return (
<div>
<h1>name:{this.state.name} <br/> age:{this.state.age}</h1>
name:<input type='text' onChange={this.handleChange1}></input>
<br/>
age:<input type='text' onChange={this.handleChange2}></input>
<br/>
<button onClick={this.handleClick}>提交</button>
</div>
);
}
}
将各个功能抽离出来,实现组件化
实现方法:
首先在项目中的 src 中定义一个文件夹 store 用来存储 action.js、constant.js、index.js、reducer.js 文件
1. App.js 中定义一个 UI ( 传递 props ) 组件用来返回数据
//引入文件
import *as action from './store/action'
//定义UI组件
function StudentFrom(props) {
const {name,age,handleChange1,handleChange2,handleClick}=props
return (
<div>
<h1>name:{name} <br/> age:{age}</h1>
name:<input type='text' onChange={handleChange1}></input>
<br/>
age:<input type='text' onChange={handleChange2}></input>
<br/>
<button onClick={handleClick}>提交</button>
</div>
);
}
2. App.js 中定义映射数据及方法
//映射数据及方法
const mapStateToProps = state =>({
name:state.name,
age:state.age,
})
const mapDispatchTpProps = {
handleChange1:(e)=>action.nameAction(e.target.value),
handleChange2:(e)=>action.ageAction(e.target.value),
handleClick:()=>action.commitAction(),
}
在 action.js 中写入:
//from
export const nameAction = (payload) =>{
return{
type:constant.FORM_NAME,
payload:payload
}
}
export const ageAction = (payload) =>{
return{
type:constant.FORM_AGE,
payload:payload
}
}
export const commitAction = () =>{
return{
type:constant.FORM_COMMIT
}
}
在 constant.js 中写入:
//from
export const FORM_NAME='FORM_NAME'
export const FORM_AGE='FORM_AGE'
export const FORM_COMMIT='FORM_COMMIT'
3. 定义容器组件:
//定义容器组件
const Container = connect (mapStateToProps,mapDispatchToProps)(StudentFrom)
4.将定义的组件挂载到App容器上:
class App extends Component {
render() {
return (
<Provider store={store}>
<Container/>
</Provider>
);
}
}
在 reducer.js 中写入:
import *as constant from './constant'
const defaultState={
name:"",
age:'',
}
const reducer = (state=defaultState,action)=>{
let newState = JSON.parse(JSON.stringify(state))
switch (action.type) {
case constant.FORM_NAME:
newState.name=action.payload
return newState
case constant.FORM_AGE:
newState.age=action.payload
return newState
case constant.FORM_COMMIT:
// const {name,age}=state
return {mage:'ok',result:1}
default:
return state
}
}
export default reducer
在 index.js 中写入:
import {createStore} from 'redux'
import reducer from './reducer.js'
const store =createStore(reducer)
export default store
抽离后:
这样......我们就可以实现组件化..................