Comment append une classe avec React.js?

J’ai besoin d’append la classe “active” après avoir cliqué sur le bouton pour supprimer toutes les autres classes “actives”.

Regardez ici s’il vous plaît: https://codepen.io/azat-io/pen/RWjyZX

var Tags = React.createClass({ setFilter: function(filter) { this.props.onChangeFilter(filter); }, render: function() { return       
 } }); var Kid = React.createClass({ render: function() { return  {this.props.name}
 
 } }); 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  }); return  Kids Finder
  {list} 
 } }); 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);

Comment puis-je le rendre meilleur ici?

C’est simple. regarde ça

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

En gros, vous voulez gérer les états de votre composant afin de vérifier celui qui est actuellement actif. vous devrez inclure

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

vérifier le code sur le lien

c’est très utile:

https://github.com/JedWatson/classnames

Vous pouvez faire des choses comme

 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'

ou l’utiliser comme ça

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

Comme vous avez déjà un composant appelant une fonction sur son parent, vous n’avez pas besoin d’état supplémentaire: passez simplement le filtre au composant tant que prop et utilisez-le pour rendre vos boutons. Ainsi:

Changez votre fonction de rendu dans votre composant pour:

 render: function() { return      
 },

Et append une fonction dans :

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

Et dans votre composant , passez l’état du filtre au composant tant que prop:

 return  Kids Finder
  {list}

Ensuite, cela devrait fonctionner comme prévu. Codepen ici (espérons que le lien fonctionne)