Question

有一个我过去几周一直在做的小项目。基本前提是有步进的步进器。用户可以点击它们中的每一个，并获得每个步骤的待办事项的描述。还有一个按钮来完成该步骤。目前，我仍然坚持使按钮正常工作。

我想要的是：当用户单击按钮完成步骤时，该步进项目会更改其样式（此案例类名称），使其显示为完成，并且该按钮将被禁用以进行下一步。

我现在正处于许多if / elses的地步，我不再知道如何完成这项任务，即使我要改写if＆＃39; s中的其他内容。不同的方式我不知道如何做出新的反应。

一些代码段： 我的父组件。

class UserPage extends Component {
state = {
    currentStep: 1,
    pendingApproval: false
}

clickHandler(e, step) {
    e.preventDefault();
    this.setState({ currentStep: step })
}

incrimentStep(e, step) {
    e.preventDefault();
    this.setState({ currentStep: step, pendingApproval: true })
}

render() {
    return (
        <Grid>
            <Grid.Row columns={1}>
                <Grid.Column stretched>
                    <Stepper
                        clickHandler={this.clickHandler.bind(this)}
                        steps={this.props.user.process.steps}
                        pendingApproval={this.state.pendingApproval}
                    />
                </Grid.Column>
            </Grid.Row>

            <Grid.Row columns={1}>
                <Grid.Column stretched>
                    <Steps currentStep={this.state.currentStep} steps={this.props.user.process.steps} />
                    <StepButton
                        incrimentStep={this.incrimentStep.bind(this)}
                        currentStep={this.state.currentStep}
                        steps={this.props.user.process.steps}
                        pendingApproval={this.state.pendingApproval}
                    />
                </Grid.Column>
            </Grid.Row>
        </Grid>
    )
}
}

export default UserPage;

我想要修复的我的子组件：

class UserStepper extends Component {

render() {
    const steps_length = this.props.steps.length;
    let handler = this.props.clickHandler;
    // let incompleteStepsArray = []
    // let incompleteID = -1;
    let pendingApproval = this.props.pendingApproval;
    return (
        <div id="stepper-container">
            {this.props.steps.map(function (step, index) {
                if (step.isDone) {
                    if (index !== steps_length - 1) {
                        return (
                            <div key={index} className="completed">
                                <StepperFill
                                    index={index + 1}
                                    click={handler}
                                    steps={step[index]}
                                    class_name="completecontainer"
                                />
                                <CircleCompleted />
                            </div>
                        )
                    }
                    else {
                        return (
                            <div key={index} className="completed">
                                <StepperFill
                                    index={index + 1}
                                    click={handler}
                                    steps={step[index]}
                                    class_name="completecontainer"
                                />
                            </div>
                        )
                    }
                }
                else {
                    {/* incompleteID = incompleteID +1; */}
                    {/* console.log(incompleteStepsArray) */}
                    if (index !== steps_length - 1) {
                        return (
                            <div key={index} className="incompleted">
                                <StepperFill
                                    index={index + 1}
                                    click={handler}
                                    steps={step[index]}
                                    class_name="incompletecontainer"
                                />
                                <CircleIncompleted />
                            </div>
                        )
                    }
                    else {
                        return (
                            <div key={index} className="incompleted">
                                <StepperFill
                                    index={index + 1}
                                    click={handler}
                                    steps={step[index]}
                                    class_name="incompletecontainer"/>
                            </div>
                        )
                    }
                }
            })}
        </div>
    )
}
}

//Functional component to decide wether the stepper should be filled or left 
blank (Complete or Incomplete)
const StepperFill = (props) => {
return (<div onClick={(e) => props.click(e, props.index)} className= 
{props.class_name}>
    <p>Step {props.index}</p>
</div>
)
}

const CircleCompleted = () => {
return (
    <div className='circle_completed'>
        <Icon.Group size='big'>
            <Icon size='small' name='checkmark' color='green' />
        </Icon.Group>
    </div>
)
}

const CircleIncompleted = () => {
return (
    <div className='circle_incompleted'>
    </div>
)
}


export default UserStepper;

对于长代码感到抱歉，没有其他想法如何显示它，否则它会对正在发生的事情有意义。任何建议都表示赞赏。

Answer 1

你有很多方法可以重构这个但是要禁用按钮，一个简单的方法就是将isNextBtnDisabled添加到你的状态并将其传递给按钮。只要您想要禁用按钮，只需将该变量设置为true即可。

class UserPage extends Component {
state = {
  currentStep: 1,
  pendingApproval: false,
  isNextBtnDisabled: false,
}

clickHandler(e, step) {
  e.preventDefault();
  this.setState({ currentStep: step, isNextBtnDisabled: this.state.pendingApproval })
}

incrimentStep(e, step) {
  e.preventDefault();
  this.setState({ currentStep: step, pendingApproval: true, isNextBtnDisabled: true })
}

render() {
return (
    <Grid>
        <Grid.Row columns={1}>
            <Grid.Column stretched>
                <Stepper
                    clickHandler={this.clickHandler.bind(this)}
                    steps={this.props.user.process.steps}
                    pendingApproval={this.state.pendingApproval}
                />
            </Grid.Column>
        </Grid.Row>

        <Grid.Row columns={1}>
            <Grid.Column stretched>
                <Steps currentStep={this.state.currentStep} steps={this.props.user.process.steps} />
                <StepButton
                    incrimentStep={this.incrimentStep.bind(this)}
                    currentStep={this.state.currentStep}
                    steps={this.props.user.process.steps}
                    pendingApproval={this.state.pendingApproval}
                    disabled={this.state.isNextBtnDisabled}
                />
            </Grid.Column>
        </Grid.Row>
    </Grid>

根据按钮单击更改className，同时避免更多if / elses

1 个答案: