reactjs - React-Redux 表单提交
问题描述
我是 React-Redux 的初学者。尝试在父组件(Region.jsx)中编写 switch 语句时遇到错误。它需要一个属性、方法或构造函数。它在“let selectedRegion”附近显示错误。我该如何纠正这个问题?
以下是我的代码..
import React, { Component } from "react";
import RegionList from "./RegionList";
import RegionForm from "./RegionForm";
import { Row, Col, Container } from "react-bootstrap";
import "./regionManagement.scss";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { regionActions } from "./ducks/index";
const regionStates = {
add: {
title: "Add New Region",
button: "Add New Region",
value: "value here",
selectedRegion: null,
mode: "add",
isDisabled: false
},
view: data => {
return {
title: "View Region",
button: "Edit Region",
selectedRegion: data,
value: null,
mode: "view",
isDisabled: true
};
},
edit: data => {
return {
title: "Edit Region",
button: "Update Region",
selectedRegion: data,
value: null,
mode: "edit",
isDisabled: false
};
}
};
class Region extends Component {
constructor(props) {
super(props);
this.state = regionStates.add;
}
viewForm = data => {
this.setState(regionStates.view(data));
};
editForm = data => {
this.setState(regionStates.edit(data));
};
addRegion = event => {
this.props.addRegion(event);
};
editRegion = event => {
this.props.editRegion(this.state.selectedRegion);
};
componentDidMount() {
this.props.getRegion();
}
// var selectedRegion;
// // if (this.state.mode != "add") { // also correct
// if (!this.state.add) {
// selectedRegion = this.state.selectedRegion;
// //selectedRegion.name = event.regionName;
// }
let operation;
switch (this.state.mode) {
case "view":
operation = this.editForm(selectedRegion);
break;
case "add":
operation = this.addRegion();
break;
case "edit":
operation = this.editRegion(selectedRegion);
break;
case "delete":
operation = this.deleteRegion;
break;
}
render() {
return (
<>
<Container>
<Row className="space"></Row>
<Row>
<Col sm={4}>
<h3 className="space2"> Region</h3>
{/* <RegionForm {...this.props}/> */}
<RegionForm
title={this.state.title}
button={this.state.button}
selectedRegion={this.state.selectedRegion}
mode={this.state.mode}
//onSubmit={this.handleSubmit}
// show={this.state.show}
operation={operation}
isDisabled={this.state.isDisabled}
/>
</Col>
<Col sm={8}>
<RegionList
regions={this.props.regions}
pathname={this.props.pathname}
viewForm={this.viewForm}
editForm={this.editForm}
//addRegion={this.addRegion}
/>
</Col>
</Row>
</Container>
</>
);
}
}
function mapStateToProps(state) {
return {
...state,
region: state,
regions: state.Regions.regions
};
}
export default withRouter(connect(mapStateToProps, regionActions)(Region));
请解释我如何解决这个问题..而不是使用'onSubmit'。
解决方案
推荐阅读
- node.js - 导致架构错误的 GraphQL / Apollo 服务器指令
- c++ - SimplicialLLT 返回错误的cholesky 因子
- css - Edge 和 IE 中的像素化图标
- angularjs - 詹金斯 env 变量无法识别
- angularjs - Angular js nvd3为图例设置边距
- python - 在 Python 中解析嵌套的 Json 以删除列中的特殊字符
- gradle - Gradle:从 PlayBinary 分发中排除文件
- debugging - Flutter 在编译发布时会删除调试模式代码吗?
- spring-boot - 如何在 spring-boot Web 客户端中发送请求正文?
- c++ - boost C++ 库在 perl_matcher match_all_states 上崩溃