Блог

Я новичок в reactjs. Создается компонент входа и регистрации. При нажатии кнопки предполагается, что имя класса добавляется к определенному элементу, в моем случае signWrapper . Я пробовал несколько способов, но это не работает. Как мне добавить имя класса к определенному элементу, нажав кнопку?

Мой код находится в codesandbox. Любые предложения приветствуются.

https://codesandbox.io/s/stoic-hertz-pmk23?file=/src/SignInAndSignUp.js:0-2298

вы неправильно использовали свою функцию onClick . вы должны вызвать это .

вместо этого

 onClick = { () => this.handleClick}
  

вы должны сделать это

 onClick = { () => this.handleClick()}
  

и обработайте свой onClick следующим образом

 handleClick = () => {
    this.setState({ active: !this.state.active });  // to toggle the state
}; 
  

вот рабочий пример https://codesandbox.io/s/delicate-star-ghp7h?file=/src/SignInAndSignUp.js:283-360

Вызовите вашу onClick функцию следующим образом:

 onClick={this.handleClick}
  

 handleClick = () => {
  // I added ...this.state so it doesn't affect any other state variables you may add
  this.setState({ ...this.state, active: !this.state.active });
};
  

Также ознакомьтесь с библиотекой clsx. Это очень полезно, когда у вас есть несколько классов, которые необходимо активировать или деактивировать на основе условных обозначений. Это будет выглядеть примерно так:

 className={clsx('signWrapper', { 'right-panel-active': active })}