React.js를 사용하여 클래스를 추가하려면 어떻게 해야 합니까?

React.js를 사용하여 클래스를 추가하려면 어떻게 해야 합니까?

클래스를 추가해야 합니다.active버튼을 클릭하고 다른 모든 항목을 삭제한 후active반.

여기를 봐주세요.https://codepen.io/azat-io/pen/RWjyZX

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

var Kid = React.createClass({
  render: function() {
    return <ul>
      <li>{this.props.name}</li>
      </ul>
  }
});

var List = React.createClass({
  getInitialState: function() {
    return {
      filter: ''
    };
  },
  changeFilter: function(filter) {
    this.setState({
      filter: filter
    });
  },
  render: function() {
    var list = this.props.Data;
    
    if (this.state.filter !== '') {
      list = list.filter((i)=> i.tags.indexOf(this.state.filter) !== -1);
      console.log(list);
    } 
    
    list = list.map(function(Props){
      return <Kid {...Props} />
    });

    return <div>
      <h2>Kids Finder</h2>
      <Tags onChangeFilter={this.changeFilter}/>
      {list}
    </div>
  }
});

var options = {
  Data:  [{
    name: 'Eric Cartman',
    tags: ['male', 'child']
  },{
    name: 'Wendy Testaburger',
    tags: ['female', 'child']
  },{
    name: 'Randy Marsh',
    tags: ['male']
  },{
    name: 'Butters Stotch',
    tags: ['male', 'blonde', 'child']
  },{
    name: 'Bebe Stevens',
    tags: ['female', 'blonde', 'child']
  }]
};

var element = React.createElement(List, options);
React.render(element, document.body);

어떻게 하면 더 나아질까요?

간단해. 이것 좀 봐.

https://codepen.io/anon/pen/mepogj?editors=001

기본적으로 컴포넌트의 상태를 처리하려고 하기 때문에 현재 액티브한 컴포넌트를 확인합니다.다음을 포함시켜야 합니다.

getInitialState: function(){}
//and 
isActive: function(){}

링크의 코드를 체크하다

이것은 매우 유용합니다.

https://github.com/JedWatson/classnames

이런 것도 할 수 있고

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

아니면 이렇게 쓰거나

var btnClass = classNames('btn', this.props.className, {
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

그들의 사이트에서 가져왔습니다.

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

https://reactjs.org/docs/faq-styling.html

이미 가지고 계시기 때문에<Tags>부모에서 함수를 호출하는 컴포넌트는 추가 상태는 필요 없습니다.필터를 에 건네주는 것만으로,<Tags>버튼을 렌더링할 때 사용합니다.다음과 같은 경우:

렌더 기능을 변경합니다.<Tags>컴포넌트 대상:

render: function() {
  return <div className = "tags">
    <button className = {this._checkActiveBtn('')} onClick = {this.setFilter.bind(this, '')}>All</button>
    <button className = {this._checkActiveBtn('male')} onClick = {this.setFilter.bind(this, 'male')}>male</button>
    <button className = {this._checkActiveBtn('female')} onClick = {this.setFilter.bind(this, 'female')}>female</button>
    <button className = {this._checkActiveBtn('blonde')} onClick = {this.setFilter.bind(this, 'blonde')}>blonde</button>
  </div>
},

그리고 내부에 기능을 추가한다.<Tags>:

_checkActiveBtn: function(filterName) {
  return (filterName == this.props.activeFilter) ? "btn active" : "btn";
}

그리고 네 안에<List>컴포넌트, 필터 상태를<tags>컴포넌트를 소품으로 사용:

return <div>
  <h2>Kids Finder</h2> 
  <Tags filter = {this.state.filter} onChangeFilter = {this.changeFilter} />
  {list}
</div>

그러면 의도한 대로 작동해야 합니다.여기에 코드 입력(링크가 작동하기를)

당신은 또한 jquery를 사용한 오래된 방법처럼 이것을 성취하기 위해 순수한 js를 사용할 수 있다.

간단한 방법을 원하시면 이것을 시도해 보세요.

경고: 이 방법은 올바른 대응 방법이 아닐 수 있습니다.

 document.getElementById("myID").classList.add("show-example");

const activeState = (e)=>{
    var id = e.target.id
    const idArray = ["homeBtn","aboutBtn","servicesBtn","portfolioBtn","testmBtn","blogBtn","contactBtn"]

    idArray.forEach((element)=> {
        document.getElementById(element).classList.remove("active")
    });
    console.log(id);
    document.getElementById(id).classList.add("active")

}

언급URL : https://stackoverflow.com/questions/33262493/how-to-add-a-class-with-react-js