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