reactjs - Reactjs 将类组件转换为功能组件
问题描述
我是新来的反应。我想在我的项目中使用表单步进器。我找到了一个库,但在那个库中使用了类组件。我对将类组件转换为功能组件有点困惑。我对反应知之甚少。
import {connect} from 'react-redux'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'
import Stepper from 'react-stepper-horizontal'
import { Card } from 'reactstrap'
import GeneralForm from './../../components/con/GeneralForm'
import PersonalDetailsForm from './../../components/con/PersonalDetailsForm'
import NomineeDetailsForm from './../../components/con/NomineeDetailsForm'
const ConCreate = (props) => {
constructor(props) {
super(props);
this.nextPage = this.nextPage.bind(this);
this.previousPage = this.previousPage.bind(this);
this.state = {
page: 0,
steps: [
{title: 'Visitor Details'},
{title: 'Personal Details'},
{title: 'Nominee Details'}
]
};
}
nextPage() {
this.setState({ page: this.state.page + 1 });
}
previousPage() {
this.setState({ page: this.state.page - 1 });
}
return (
<Card>
<Stepper steps={ steps } activeStep={ page } />
{page === 0 && <GeneralForm onSubmit={nextPage} />}
{page === 1 && (
<PersonalDetailsForm
previousPage={previousPage}
onSubmit={nextPage}
/>
)}
{page === 2 && (
<NomineeDetailsForm
previousPage={previousPage}
onSubmit={onSubmit}
/>
)}
</Card>
)
}
ConCreate.propTypes = {
}
const mapDispatchToProps = {}
function mapStateToProps (state) {
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(ConCreate)
如何在功能组件中转换以下代码
constructor(props) {
super(props);
this.nextPage = this.nextPage.bind(this);
this.previousPage = this.previousPage.bind(this);
this.state = {
page: 0,
steps: [
{title: 'Visitor Details'},
{title: 'Personal Details'},
{title: 'Nominee Details'}
]
};
}
nextPage() {
this.setState({ page: this.state.page + 1 });
}
previousPage() {
this.setState({ page: this.state.page - 1 });
}
请建议我如何将类组件转换为功能组件。
解决方案
检查下面的代码:
import React, {useState} from 'react'
import {connect} from 'react-redux'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'
import Stepper from 'react-stepper-horizontal'
import { Card } from 'reactstrap'
import GeneralForm from './../../components/con/GeneralForm'
import PersonalDetailsForm from './../../components/con/PersonalDetailsForm'
import NomineeDetailsForm from './../../components/con/NomineeDetailsForm'
const ConCreate = (props) => {
const initStepsValue = [
{title: 'Visitor Details'},
{title: 'Personal Details'},
{title: 'Nominee Details'}
]
const [page, setPage] = useState(0)
const [steps, setSteps] = useState(initStepValue)
const nextPage = () => setPage(page + 1)
const prevPage = () => previousPage(page - 1)
return (
<Card>
<Stepper steps={ steps } activeStep={ page } />
{page === 0 && <GeneralForm onSubmit={nextPage} />}
{page === 1 && (
<PersonalDetailsForm
previousPage={previousPage}
onSubmit={nextPage}
/>
)}
{page === 2 && (
<NomineeDetailsForm
previousPage={previousPage}
onSubmit={onSubmit}
/>
)}
</Card>
)
}
ConCreate.propTypes = {}
const mapDispatchToProps = {}
const mapStateToProps = state => ({})
export default connect(
mapStateToProps,
mapDispatchToProps
)(ConCreate)
推荐阅读
- python-3.x - 生产服务器上的 Telegram webhook 问题
- django-orm - 在 django 中获取当前 obj 的下一个和上一个对象的最佳方法
- algorithm - 如何使用 \listofalgorithms 跳过乳胶列表中的算法?
- asp.net-mvc - ASP.NET MVC SMTP 不工作并在我单击提交按钮后返回错误值
- html - 无法让引导导航切换器工作
- python - Python中的多维线性回归
- flutter - 如何在 Flutter 中创建 Supabase 表?
- dart - 为什么 Dart BigInt 会溢出?
- php - 从官方 Wordpress 图像构建我自己的 Docker 图像
- javascript - nvd3.js multiBarHorizontalChart 上没有轴刻度