组件有一个按钮，点击时会发生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"
