50 lines
1.5 KiB
React
50 lines
1.5 KiB
React
import React,{Component} from 'react'
|
||
import {connect} from 'react-redux'
|
||
import {createIncreementAction,createDecreementAction,createIncreementAsyncAction} from '../../redux/count_action'
|
||
|
||
class Count extends Component{
|
||
increement=()=>{
|
||
const {value}=this.selectNumber
|
||
this.props.jia(value*1)
|
||
}
|
||
decreement=()=>{
|
||
const {value}=this.selectNumber
|
||
this.props.jian(value*1)
|
||
}
|
||
increementOdd=()=>{
|
||
const {value}=this.selectNumber
|
||
if(this.props.state.count%2!==0){
|
||
this.props.jia(value*1)
|
||
}
|
||
}
|
||
increementSync=()=>{
|
||
const {value}=this.selectNumber
|
||
this.props.jiaAsync(value*1,1000)
|
||
}
|
||
render(){
|
||
return(
|
||
<div>
|
||
<h1>当前求和为：{this.props.state.count}</h1>
|
||
<select name="" id="" ref={c=>this.selectNumber=c}>
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
<option value="3">3</option>
|
||
</select>
|
||
<button onClick={this.increement}>+</button>
|
||
<button onClick={this.decreement}>-</button>
|
||
<button onClick={this.increementOdd}>计数再加</button>
|
||
<button onClick={this.increementSync}>异步再加</button>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
const CountContainer=connect(
|
||
state=>({state}),
|
||
{
|
||
jia:createIncreementAction,
|
||
jian:createDecreementAction,
|
||
jiaAsync:createIncreementAsyncAction,
|
||
}
|
||
)
|
||
(Count)
|
||
export default CountContainer |