根据按钮单击使用"onClick"/"onSubmit"更改状态

Question

我正试图根据单击的按钮来识别Student或Counselor。

我试图实现的是，如果用户单击Counselor按钮，isCounselor将变为true，如果单击另一个按钮，则isStudent将变为true。

我已经尝试了onClick和onSubmit，但状态保持不变。

因此，我相信我做错了什么，但不确定哪里做错了。我刚开始使用react-redux，无法理解它！

减速器包含在combineReducers中，我在下面的代码中创建了类型：

减速器

import { IS_COUNSELOR, IS_STUDENT } from "../actions/types";
const initialState = {
isCounselor: false,
isStudent: false,
};
export default function (state = initialState, action) {
switch (action.type) {
case IS_COUNSELOR:
return {
...state,
isCounselor: true,
isStudent: false,
};
case IS_STUDENT:
return {
...state,
isCounselor: false,
isStudent: true,
};
default:
return state;
}
}

动作

import { IS_COUNSELOR, IS_STUDENT } from "./types";
// IS COUNSELOR
export const toCounselor = () => {
return {
type: IS_COUNSELOR,
payload: { isCounselor, isStudent },
};
};
// IS STUDENT
export const toStudent = () => {
return {
type: IS_STUDENT,
payload: { isCounselor, isStudent },
};
};

组件

import React, { Component } from "react";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import { toCounselor, toStudent } from "../../actions/clients";
export class Welcome extends Component {
static propTypes = {
isCounselor: PropTypes.bool,
isStudent: PropTypes.bool,
toCounselor: PropTypes.func.isRequired,
toStudent: PropTypes.func.isRequired,
};
onSubmitCounselor = (e) => {
e.preventDefault();
this.props.toCounselor();
};
onSubmitStudent = (e) => {
e.preventDefault();
this.props.toStudent();
};
render() {
return (
{/* some divs */}
<div className="col-md-6 mt-3">
<Link to="/register" className="nav-link">
<button
type="submit"
className="btn btn-success"
// name="isStudent"
onSubmit={this.onSubmitStudent}
>
I am a Student
</button>
</Link>
</div>
<div className="col-md-6 mt-3">
<Link to="/register" className="nav-link">
<button
type="submit"
className="btn btn-info"
// name="isCounselor"
onSubmit={this.onSubmitCounselor}
>
I am a Counselor
</button>
</Link>
</div>
{/* some other divs */}
);
}
}
export default Welcome;

你能给我个建议吗？非常感谢。

Answer 1

您的Welcome组件似乎没有连接到redux状态，因此它没有从存储中接收数据，操作也没有在redux循环中调度。

下面的代码还没有准备好，但应该会给你一个工作路径

// Connect the Redux Store (state) to the component props
const mapStateToProps = (state) => ({
isCounselor: state.isCounselor,
isStudent: state.isStudent,
});
// Updated thanks to the comment of Drew Reese below
const mapDispatchToProps = { toCounselor, toStudent };
// Previous version
// const mapDispatchToProps = dispatch => bindActionCreators({ toCounselor, toStudent }, dispatch);
export default connect(
mapStateToProps,
mapDispatchToProps
)(Welcome)

您应该看看文档的这一部分，以及这里关于bindActionCreators 的内容

Answer 2

在操作文件中，执行以下操作。。。

import { IS_COUNSELOR, IS_STUDENT } from "./types";
// IS COUNSELOR
export const toCounselor = () => ({ type: IS_COUNSELOR });
// IS STUDENT
export const toStudent = () => ({ type: IS_STUDENT });

在渲染内部，将函数传递给Link组件的onClick道具

然后在组件的末尾，执行以下操作。。。

const mapStateToProps = (state) => ({
isCounselor: state.isCounselor,
isStudent: state. isStudent,
});
const mapDispatchToProps = { toCounselor, toStudent };
export default connect(
mapStateToProps,
mapDispatchToProps
)(Welcome)