Wie füge ich eine Klasse mit React.js hinzu?

Question

Können Sie mir mit dieser ziemlich einfachen Frage helfen. Ich brauche die Klasse "aktiv" nach dem Klicken auf den Button und entferne alle anderen "aktiven" Klassen. hier

Schauen Sie bitte: 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); 

Wie kann ich es besser machen hier?

Answer 1

Es ist einfach. werfen Sie einen Blick auf diese

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

im Grunde wollen Sie mit den Staaten Ihrer Komponente behandeln, so dass Sie die aktuell aktiven überprüfen.

https://github.com/JedWatson/classnames

Sie können tun Sachen wie

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' 

oder werden Sie gleich

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

Scheck aus dem Code auf den Link

Answer 2

Da Sie bereits <Tags> Komponente eine Funktion auf seiner übergeordneten aufrufen, benötigen Sie keinen zusätzlichen Status: übergeben Sie einfach den Filter an die <Tags> Komponente als Prop, und verwenden Sie dies beim Rendern Ihrer Schaltflächen. Wie so:

Ihre machen Ändern Funktion in Ihrem <Tags> Komponente:

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

Und fügen Sie eine Funktion innerhalb <Tags>:

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

Und in Ihrem <List> Komponente, passieren den Filter-Zustand in den <tags> Komponente als Requisite:

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

Dann sollte es wie vorgesehen funktionieren. Codepen here (hoffe, der Link funktioniert)

Answer 3

das ist ziemlich nützlich aufnehmen müssen Verwenden Sie es so

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