React.jsでクラスを追加するには？

Question

この簡単な質問でお手伝いできますか？ボタンをクリックした後にクラスを追加し、他のすべての「アクティブな」クラスを削除する必要があります。

はこちらからどうぞご覧ください：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); 

？

Answer 1

それは簡単です。 この

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

基本的にあなたが現在アクティブなものをチェックして、あなたのコンポーネントの状態に対処したいを見てみましょう。

https://github.com/JedWatson/classnames

あなたは

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' 

かのようなものを行うことができます：あなたは、これはかなり便利ですリンク

Answer 2

親要素に関数を呼び出しているコンポーネントが既に<Tags>になっているため、追加の状態は必要ありません。<Tags>コンポーネントにフィルタを渡してボタンをレンダリングするだけです。これと同じように：

にご <Tags>コンポーネント内にあなたのレンダリング機能を変更

：

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

そして<Tags>内の機能を追加します。

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

そして、あなたの<List>コンポーネント内にフィルタ状態を渡します支柱として<tags>成分：

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

それは意図したとおりに動作するはずです。 Codepen here（リンク作品を願っています）

Answer 3

に

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

は、チェックアウトのコードを追加する必要がありますこのように使う

私は、「ボタン」コンポーネントを作るだけではなく、あなたの「タグ」コンポーネントの下のリンクの束をレンダリングすることをお勧め

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