react如何点击更改数据。

最新推荐文章于 2025-04-19 02:53:12 发布

原创最新推荐文章于 2025-04-19 02:53:12 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

本文介绍了在React中如何通过点击事件改变数据。首先创建login文件夹并设置入口文件及store，接着使用三元运算符根据reducer中的数据状态显示不同内容。利用connect的mapStateToProps获取reducer数据，并绑定点击事件触发action。在reducer中设置默认login数据，通过派发action和reducer更新数据。最后在组件中绑定点击事件，通过actionCreators派发action，更新state完成点击状态切换。

准备工作
首先创建一个login的文件夹，其中含有入口文件和store的文件在这里插入图片描述
这里正式开始啦！
思路：首先先要写一个三元判断，判断当reducer中数据是false或者true的时候应该显示的内容，并且获取reducer中的默认数据，然后绑定一个点击事件，当点击时去派发action然后通过reducer更改数据，这样就可以啦！！！
那么首先我们写一个判断

{
   this.props.login ? <div>退出</div> : <div>登录</div>
}

顺便使用connect中的mapStateToProps去获取数据（这里我已经使用了immutable，所以需要下载安装immutable，这里我就不多说啦，大家可以自行查阅immutable对象）

const mapStateToProps = (state) => {
    return {
        login: state.getIn(["login","login"])
    }
}

在reducer.js中写默认的login数据（同样这里使用了immutable中的fromJS，如果没有下载就用fromJS会报错哦）

const defaultState = fromJS({
    login:false
})

到这里，如果我们更改login的数据在页面上就会呈现不一样的效果，那么接下来就是如何自动更改reducer中的数据了！
想要改变store中的数据，就一定要走一个派发action的流程，下面就开始正式派发啦！
首先需要点击的时候去改变状态，那么就需要在登录上绑定一个点击事件，

 {
    this.props.login ? <div>退出</div> : <div onClick={this.props.changeState}>登录</div>
}

然后将绑定的方法写在mapDispatchToProps中，派发action传递给store（这里我创建了一个actionCreators的文件夹，所以需要在头部引入这个）

//顶部引入
import {actionCreators} from "./store";


const mapDispatchToProps = (dispatch) => ({
    changeState(){
        dispatch(actionCreators.changeState())
    }
})

现在转到actionCreators这个目录下（这里引入了actionTypes 所以需要引入）

import * as actionTypes  from "./actionTypes";
//在这里定义action，然后通过匹配type在reducer中执行更改state的值
const changeLogin = () => ({
    type:actionTypes.CHANGE_STATE,
    value:true
})
export const changeState = () => {
    return(dispatch) => {
        dispatch(changeLogin())
    }
}

在actionTypes.js中定义type的常量

export const CHANGE_STATE = 'login/CHANGE_STATE'

最后在reducer.js中就可以通过type来更改值了

import {fromJS} from 'immutable'
import * as actionTypes from "./actionTypes";
const defaultState = fromJS({
    login:false
})

export default (state = defaultState,action) => {
//这里通过判断type值去更改state的状态
    if(action.type === actionTypes.CHANGE_STATE){
        return state.set('login',action.value)
    }
    return state
}