Как добавить class в див по клику?

Question

[IIITRIX]

Нужно чтоб при нажатии на input, к div присваивался еще один класс css
если нажать в другое место экрана, css должен сбрасываться
пробую так, но что то не выходит!

return classNames({
      'exp':  this.state.clicked,
      'noexp':  !this.state.clicked
    });
{this.getClassNames()} onClick={this.setState({clicked: !this.state.clicked})

Answer 1

[0xD34F]

Зачем onClick? - при повторном клике на инпут класс удалится, а клик снаружи инпута вы так не обработаете. Наверное, стоит использовать onFocus и onBlur:

class App extends React.Component {
  state = {
    classes: [ 'bullshit' ],
  }

  onFocus = () => {
    this.setState(({ classes }) => ({
      classes: [ ...classes, 'focus' ],
    }));
  }

  onBlur = () => {
    this.setState(({ classes }) => ({
      classes: classes.filter(n => n !== 'focus'),
    }));
  }

  render() {
    return (
      <div className={this.state.classes.join(' ')}>
        <input onFocus={this.onFocus} onBlur={this.onBlur} />
      </div>
    );
  }
}

Comments

[IIITRIX]

Прошу прощение, можете еще помочь также, но по клику.
то есть кликнул, получил класс active, кликнул еще раз класс исчез

[0xD34F]

IIITRIX, ну тогда можно как вы изначально пытались - onClick с переключением значения на противоположное.

[IIITRIX]

0xD34F, Сделал так, работает как надо, но почему -то только после второго нажатия...

state = {
    className: [ 'share' ]
  }
  handleClick = () =>{
    if (this.state.className === 'share'){
      this.setState({className: "share active"});
    } else {
      this.setState({className: 'share'});
    }
  }

<div className={this.state.className} >
   <Link to="#" onClick={this.handleClick}>
        <i className="icon-share-1"></i>
         <u>Поделиться</u>
  </Link>
</div>

[0xD34F]

IIITRIX, "почему-то"? А каким образом, по-вашему, массив может быть равен строке? - посмотрите, что вы сравниваете при первой проверке: [ 'share' ] с 'share'.