使用语义反应多步骤表单 UI

Question

我刚刚掌握 React 的语义 UI 并且正在关注此 tutorial。

虽然还不错，但使用的 "switch case" 会发出警告 "Expected a default case"。

我假设这是一种更简单的方法来完成和消除警告消息？

render(){
        const {step} = this.state;
        const { firstName, lastName, email, age, city, country } = this.state;
        const values = { firstName, lastName, email, age, city, country };
        switch(step) {
        case 1:
            return <UserDetails 
                    nextStep={this.nextStep} 
                    handleChange = {this.handleChange}
                    values={values}
                    />
        case 2:
            return <PersonalDetails 
                    nextStep={this.nextStep}
                    prevStep={this.prevStep}
                    handleChange = {this.handleChange}
                    values={values}
                    />
        case 3:
            return <Confirmation 
                    nextStep={this.nextStep}
                    prevStep={this.prevStep}
                    values={values}
                    />
        case 4:
            return <Success />
        }
    }

Answer 1

就像创建案例一样添加它。 :

default:
            return <UserDetails 
                    nextStep={this.nextStep} 
                    handleChange = {this.handleChange}
                    values={values}
                    />

`

这是默认情况，当值不是 1，也不是 2,3 和 4 时调用。

使用语义反应多步骤表单 UI

React Multi-Step Form using Semantic UI

reactjs

semantic-ui