Блог

Здравствуйте, в настоящее время я пытаюсь изучить React и переписываю все образцы кода из документа в локальном react-create-app. У меня возникли проблемы с этой частью документа, codepen здесь:

 class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  
  
  render() {
    const isLoggedIn = this.state.isLoggedIn
    let button

    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }
    return (
      <div>
        {button}
      </div>
    );
  }
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  )
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  )
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);
 

в этом коде я просто должен отображать кнопку, показывающую «Login», если this.state.isLoggedIn === true и «Logout», если false . Этот код работает отлично, он взят из Документа.

МОЯ ПРОБЛЕМА: но когда я запускаю свой код (как показано ниже) на своем компьютере, кнопка срабатывает только один раз, а затем больше ничего не добавляется, ни изменения состояния, ни вызова функции жизненного цикла. на данный момент я не могу понять, в чем дело.

Вот мой код:

 import React from 'react'

export default class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isLoggedIn: false}
    this.handleLoginClick = this.handleLoginClick.bind(this)
    this.handleLogoutClick = this.handleLogoutClick.bind(this)
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true})
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false})
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn
    let button

    if (isLoggedIn) {
      button = <LogoutButton onClik={this.handleLogoutClick}/>
    } else {
      button = <LoginButton onClick={this.handleLoginClick}/>
    }
    return (
      <div>
        {button}
      </div>
    )
  }
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Connect
    </button>
  )
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Disconnect
    </button>
  )
}
 

и он отображается в App.js вот так:

 import React from "react";
import LoginControl from "./components/LoginControl";

export default class App extends React.Component {

  render() {
    return (
      <div className={"container"}>
        <LoginControl/>
      </div>
    )
  }
}
 

И index.js:

 import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
 

Что я делаю не так?
Спасибо.

Вы передаете реквизит «onclick» в LogoutButton вместо «onClick». Обратите внимание, что отсутствует буква «с».