主页 / 问题 / 1005582
Accepted
Александр
Asked:2020-07-22 22:58:23 +0800 CST2020-07-22 22:58:23 +0800 CST

如何检查按钮处理程序 React.js TypeScript 的类型

  • 772

组件有一个按钮，点击时会发生onClick事件并调用this.renderFormsSteps()方法；

一切都很好，但编译器发誓

Type 'void' is not assignable to type '((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined'

简单地说，我不知道如何设置处理程序类型并检查它们......

这是组件代码：

    interface RegistrationProps {
    login: LoginState 
}

interface RegistrationState {
    login: string, 
    name: string, 
    lastName: string, 
    activeStep: number,
}

export class Registration extends React.Component<RegistrationProps, RegistrationState> {
    constructor(props: any) {
        super(props)
        this.state = {
            login: '',
            name: '',
            lastName: '',
            activeStep: 1
        }
    }

    private renderSteps = (step: number) => {
        const classNameStep1 = step === 1 ? "activeStep" : "step";
        const classNameStep2 = step === 2 ? "activeStep" : "step";
        const classNameStep3 = step === 3 ? "activeStep" : "step";

        return (
            <React.Fragment>
            <div className={classNameStep1}>Логин и имя</div>
            <div className={classNameStep2}>Персональные данные</div>
            <div className={classNameStep3}>Пароль</div>
            </React.Fragment>
        )
    }

    private renderFormsSteps = (step: number) => {
       if (step === 1) {
           return (
               <div>
                   <div>Логин и имя</div>
                   <div><button onClick={this.handleNextStepButton(step)} type="button" className="btn btn-dark">Next</button></div> 
               </div>
           );
       } else if (step === 2) {
           return (
               <div>Персональные данные</div>
           );
       } else if(step === 3) {
           return (
               <div>Пароль</div>
           );
       } else {
           return (
               <div>...</div>
           );
       }
    }

    private handleNextStepButton = (nextStep: number)  => {
        this.setState({activeStep: nextStep});
    }

    public render() {
        const {activeStep} = this.state;
        return (
            <Container>
            <div className="registrationHead">
                <Link to="/"> Вернуться </Link>
            </div>
            <div className="registrationTitle">Регистрация</div>
            {this.renderSteps(activeStep)}
            {this.renderFormsSteps(activeStep)}
            </Container>
        );
    }
}

Если что (зависимости):

"@types/react": "^16.8.23",
"@types/react-dom": "^16.8.4",
 "typescript": "^3.5.3"
reactjs

1 个回答

  1. Best Answer

    通常情况下，编译器报告的不是真正的问题，而是其后果。您的问题是您onClick没有分配函数本身（this.handleNextStepButton），而是调用/执行它的结果。this.handleNextStepButton什么都不返回，因此错误。

    解决这个问题最简单的方法是使用闭包。例如像这样：

    ...
private handleNextStepButton = (nextStep: number) => () => {
    this.setState({activeStep: nextStep});
}
...

    或者您可以完全摆脱该方法handleNextStepButton（特别是因为它只使用一次），并直接替换闭包（使用 call this.setState）onClick：

    ...
<div><button onClick={ () => {this.setState({activeStep: step})} } type="button" className="btn btn-dark">Next</button></div> 
...
    • 1

相关问题