0

В компоненте есть кнопка, при нажатии на которую происходит событие 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"
2
  • Проблема здесь не в типах, а в неправильном использовании функций. Вы присваиваете onClick не саму функцию (обработчик), а результат ее вызова/выполнения. this.handleNextStepButton ничего не возвращает, поэтому компилятор и ругается.
    – hindmost
    22 июл 2019 в 15:30
  • @hindmost , подскажите, пожалуйста, как правильно присвоить саму функцию, чтобы при нажатии на кнопку получилось поменять значение activeStep. 23 июл 2019 в 4:46

1 ответ 1

1

Как это часто бывает, компилятор сообщает не о реальной проблеме, а ее следствии. Ваша проблема в том что вы присваиваете onClick не саму функцию (this.handleNextStepButton), а результат ее вызова/выполнения. this.handleNextStepButton ничего не возвращает, от этого и ошибка.

Проще всего решить эту проблему с помощью замыкания. Например так:

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

Либо можно вообще избавиться от метода handleNextStepButton (тем более что он используется только раз), и подставить замыкание (с вызовом this.setState) в onClick напрямую:

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.