Нет вызова функции - onclick не работает react

#javascript #reactjs

Вопрос:

У меня есть два компонента. Первый из них выглядит следующим образом

 class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      change: false
    };

    this.handleSwitch = this.handleSwitch.bind(this);
  }

  handleSwitch = () => {
    const { change } = this.state;
    this.setState({ change: !change })
    console.log(this.state.change)
  }

  render() {
    const { change } = this.state;

    return (
      <>
        <UserProfilPanel handleSwitch={this.handleSwitch}/>
        {
          change ? <UserProfilGallery /> : <UserProfilContent />
        }
      </>
    );
  }
}

UserProfile Panel Компоненту он передает функцию, которая должна отвечать за изменение состояния.

 const UserProfil = (handleSwitch) => {
  return (
    <Container>
      <div>
        <button onClick={() => handleSwitch}>
          gallery
        </button>
        <button onClick={() => handleSwitch}>
          info
        </button>
      </div>
    </Container>
  )
}

Когда я нажимаю некоторые кнопки, ничего не происходит. В консоли также не отображается ошибка.

Как исправить эту проблему? Я хочу изменить содержимое после нажатия кнопки

1. Вы не вызываете handleSwitch свои onClick обработчики, вы просто возвращаете функцию. {() => handleSwitch()} или {handleSwitch} — это то, что вам нужно.

2. Это должно быть onclick={() => handleSwitch()} и удалить это.handleSwitch = this.handleSwitch.bind(это);

Ответ №1:

Первый аргумент в UserProfil() является props . Чтобы разрушить только определенное свойство props объекта, вам нужно выполнить:

 const UserProfil = ({handleSwitch}) => {...

Затем внутри вашей анонимной функции onClick вам нужно вызвать handleSwitch()

 <button onClick={() => handleSwitch()}>
                           //      ^^  call function