React.js ile bir sınıf nasıl eklenir?

Question

Bu oldukça basit soruyla bana yardımcı olabilir misiniz? Düğmeye tıkladıktan sonra diğer tüm "etkin" sınıfları kaldırdıktan sonra "etkin" sınıfına ihtiyacım var. Burada

Bak edin: 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); 

Nasıl daha iyi burada yapabilirim?

Answer 1

Bu basittir. bu

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

temelde şu anda aktif bir kontrol böylece bileşenin devletleri ile uğraşmak istiyorum bakabilirsiniz.

https://github.com/JedWatson/classnames

Yapabileceğin şeyler

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' 

veya

gibi: Bu oldukça kullanışlıdır linke

Answer 2

Ebeveyninde bir işlevi çağırmak için zaten <Tags> bileşenine sahip olduğunuzdan, ek bir duruma gerek yoktur: filtreyi <Tags> bileşenini destekleyici olarak geçirmeniz yeterlidir ve bunu düğmelerinizi oluştururken kullanın. böylece gibi:

için <Tags> bileşenlerin içinde senin hale fonksiyonunu değiştirme

:

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

Ve <Tags> içinde bir işlevi ekleyin:

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

Ve <List> bileşenlerin içinde, filtre durumunu geçmesi <tags> bileşen olarak bir prop:

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

Ardından amaçlandığı gibi çalışmalıdır. Codepen here (bağlantı işe yarar umuyor)

Answer 3

kod dışarı

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

çek eklenmesi gerekmektedir bunu

gibi kullanın

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