Advertisement
Guest User

Untitled

a guest
Jul 22nd, 2019
244
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.44 KB | None | 0 0
  1. Type 'void' is not assignable to type '((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined'
  2.  
  3. interface RegistrationProps {
  4. login: LoginState
  5. }
  6.  
  7. interface RegistrationState {
  8. login: string,
  9. name: string,
  10. lastName: string,
  11. activeStep: number,
  12. }
  13.  
  14. export class Registration extends React.Component<RegistrationProps, RegistrationState> {
  15. constructor(props: any) {
  16. super(props)
  17. this.state = {
  18. login: '',
  19. name: '',
  20. lastName: '',
  21. activeStep: 1
  22. }
  23. }
  24.  
  25. private renderSteps = (step: number) => {
  26. const classNameStep1 = step === 1 ? "activeStep" : "step";
  27. const classNameStep2 = step === 2 ? "activeStep" : "step";
  28. const classNameStep3 = step === 3 ? "activeStep" : "step";
  29.  
  30. return (
  31. <React.Fragment>
  32. <div className={classNameStep1}>Логин и имя</div>
  33. <div className={classNameStep2}>Персональные данные</div>
  34. <div className={classNameStep3}>Пароль</div>
  35. </React.Fragment>
  36. )
  37. }
  38.  
  39. private renderFormsSteps = (step: number) => {
  40. if (step === 1) {
  41. return (
  42. <div>
  43. <div>Логин и имя</div>
  44. <div><button onClick={this.handleNextStepButton(step)} type="button" className="btn btn-dark">Next</button></div>
  45. </div>
  46. );
  47. } else if (step === 2) {
  48. return (
  49. <div>Персональные данные</div>
  50. );
  51. } else if(step === 3) {
  52. return (
  53. <div>Пароль</div>
  54. );
  55. } else {
  56. return (
  57. <div>...</div>
  58. );
  59. }
  60. }
  61.  
  62. private handleNextStepButton = (nextStep: number) => {
  63. this.setState({activeStep: nextStep});
  64. }
  65.  
  66. public render() {
  67. const {activeStep} = this.state;
  68. return (
  69. <Container>
  70. <div className="registrationHead">
  71. <Link to="/"> Вернуться </Link>
  72. </div>
  73. <div className="registrationTitle">Регистрация</div>
  74. {this.renderSteps(activeStep)}
  75. {this.renderFormsSteps(activeStep)}
  76. </Container>
  77. );
  78. }
  79. }
  80.  
  81. Если что (зависимости):
  82.  
  83. "@types/react": "^16.8.23",
  84. "@types/react-dom": "^16.8.4",
  85. "typescript": "^3.5.3"
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement