ReactJs 버튼에 활성 클래스 추가

Question

동적으로 생성 된 5 개의 버튼이 있습니다. 내 목표는 : 어떤 버튼이 활성 클래스를 추가하기 위해 클릭되었을 때, 그리고 다른 클래스가 활성 클래스를 제거하면 해당 클래스를 추가하는 경우입니다. 어떻게하면 될까요?

<div> 
    {buttons.map(function (name, index) { 
     return <input type="button" value={name} onClick={someFunct} key={ name }/>; 
    })} 
</div> 

Answer 1

구성 요소에 상태를 도입하고 onClick 이벤트 핸들러에 설정해야합니다.

<div> 
    {buttons.map(function (name, index) { 
     return <input 
       type="button" 
       className={this.state.active === name ? 'active' : ''} 
       value={name} 
       onClick={() => this.someFunct(name)} 
       key={ name } />; 
    })} 
</div> 

이벤트 핸들러 (요소법) : 렌더링 방법의 출력 예를 들어,에 의해, 활성 클래스를 추가하는 가장 쉬운 방법

someFunct(name) { 
    this.setState({ active: name }) 
} 

Answer 2

한 상태를 설정하고, 각 스위치에서 그 상태를 변경 상태 값을 사용하면 항목의 활성 클래스를 변경할 수 있습니다.

또한 목록의 활성 클래스를 전환 할 때도 동일한 문제가있었습니다.

예 :

var Tags = React.createClass({ 
    getInitialState: function(){ 
    return { 
     selected:'' 
    } 
    }, 
    setFilter: function(filter) { 
    this.setState({selected : filter}) 
    this.props.onChangeFilter(filter); 
    }, 
    isActive:function(value){ 
    return 'btn '+((value===this.state.selected) ?'active':'default'); 
    }, 
    render: function() { 
    return <div className="tags"> 
     <button className={this.isActive('')} onClick={this.setFilter.bind(this, '')}>All</button> 
     <button className={this.isActive('male')} onClick={this.setFilter.bind(this, 'male')}>male</button> 
     <button className={this.isActive('female')} onClick={this.setFilter.bind(this, 'female')}>female</button> 
     <button className={this.isActive('child')} onClick={this.setFilter.bind(this, 'child')}>child</button> 
     <button className={this.isActive('blonde')} onClick={this.setFilter.bind(this, 'blonde')}>blonde</button> 
    </div> 
    } 
}); 

희망이 당신을 도울 것입니다!