ReactJs에서 이벤트에 className을 추가 또는 삭제하려면 어떻게 해야 합니까?

ReactJs에서 이벤트에 className을 추가 또는 삭제하려면 어떻게 해야 합니까?

나는 React에 대해 꽤 처음이고 표준 js에서 내 생각을 바꾸는 것에 조금 어려움을 겪고 있다.

반응 성분에는 다음과 같은 요소가 있습니다.

<div className='base-state' onClick={this.handleClick}>click here</div>

제가 찾고 있는 행동은 클릭 시 추가 클래스를 추가하는 것입니다.첫 번째 아이디어는 클릭 핸들러 기능에 클래스를 추가하는 것이었습니다.

handleClick : function(e) {
   <add class "click-state" here>
}

하지만 비슷한 일을 하는 예를 찾을 수 없었기 때문에 제대로 생각하고 있지 않다고 생각합니다.

누가 나를 올바른 방향으로 인도해 줄 수 있나요?

클래스 목록은 컴포넌트 상태에서 얻을 수 있습니다.예를 들어 다음과 같습니다.

var Component = React.createClass({
  getInitialState: function() {
    return {
      clicked: false
    };
  },

  handleClick: function() {
    this.setState({clicked: true});
  },

  render: function() {
    var className = this.state.clicked ? 'click-state' : 'base-state';
    return <div className={className} onClick={this.handleClick}>click here</div>;
  }
});

호출하면 컴포넌트의 렌더링이 트리거됩니다.

Vanilla JS만 사용하셔도 됩니다.event.target그리고.classList):

handleClick = event => event.target.classList.add('click-state');

render() {
  return <div className="base-state" onClick={this.handleClick}>Click here</div>;
}

하지만 그러지 마세요!

React는 DOM 내의 변경을 처리해야 하므로 React를 통해 CSS 클래스를 수정해야 합니다.

Event.target(이벤트.타깃)

Element.class List

리액트/스타일링 및 CSS

클릭 핸들러 함수로 클릭 상태를 설정하고 템플릿 리터럴을 사용하여 클래스 이름을 조건부로 설정할 수 있습니다.

기능 컴포넌트를 사용하고 있는 경우,useState후크:

const [clicked, setClicked] = useState(false);

<div className={ `base-state ${clicked && 'click-state'}` } onClick={ () => setClicked(true) }>click here</div>

위의 모든 솔루션은 다음과 같은 설정에 관한 것입니다.className='click-state'클릭 시 클래스가 이미 있는 경우 더블 클릭 시 삭제되지 않습니다.기능 구성 요소를 사용하는 경우 다음을 사용하여 이 동작을 수행할 수 있습니다.useState훅과 몇 가지 조건문을 사용합니다.

const [clicked, setClicked] = useState('');

const handleClick = () => {
  clicked ? setClicked('') : setClicked('base-state click-state');
};

<div className={clicked || 'base-state' } onClick={handleClick}>click here</div>

그러기 위해서는 Vanilla javascript를 사용할 수 있지만, 그것은 반응의 표준적인 관행이 아닐 수 있습니다.

할 수 있는 일은 다음과 같습니다.

let className = 'base-state';
  if (this.props.isActive) {
    className += ' click-state';
  }
  return <span className={className}>Menu</span>
}

class names라는npm 패키지를 사용하면 쉽게 할 수 있습니다.

이 링크를 통해 Npm 패키지를 방문하실 수 있습니다.
자세한 내용은 공식 React-docs를 참조하십시오.

언급URL : https://stackoverflow.com/questions/28732253/how-to-add-or-remove-a-classname-on-event-in-reactjs