javascript - name - ¿Cómo agregar una clase con React.js?

style react

Question

¿Podrías ayudarme con esta pregunta tan simple? Necesito agregar la clase "activa" después de hacer clic en el botón y eliminar todas las demás clases "activas".

Mira aquí por favor: http://goo.gl/duLPlG

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);

¿Cómo lo hago mejor aquí?

Answer 1

Como ya tiene el componente <Tags> llamando a una función en su elemento principal, no necesita un estado adicional: simplemente pase el filtro al componente <Tags> como un apoyo, y utilícelo para representar sus botones. Al igual que:

Cambie su función de renderizado dentro de su componente <Tags> a:

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>
},

Y agrega una función dentro de <Tags> :

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

Y dentro de su componente <List> , pase el estado del filtro al componente <tags> como apoyo:

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

Entonces debería funcionar como se esperaba. Codepen aquí (espero que el enlace funcione)

Answer 2

Es simple. mira esto

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

Básicamente, debe tratar con los estados de su componente para que pueda verificar el estado actual. deberás incluir

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

mira el código en el enlace

Answer 3

esto es bastante útil:

github.com/JedWatson/classnames

Puedes hacer cosas como

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''

o usarlo así

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