マップ関数のjs onclickトグルクラスに対応する

Question

マッピングリストdomのトグルクラスonclick関数を処理する方法。

this.state.data.map(function(el,i){ 
    var className = self.state.condition ? 'list-row active' : 'inactive'; 
    return <div className={className} key={i} onClick={self.handleClick.bind(self)}> 
      <div>List</div> 
     </div> 
    }); 

Answer 1

divおよびonClickハンドラ全体を別のコンポーネントに移動し、そのコンポーネントを配列の小道具でマップするだけです。 のような何か：

const ChildComponent = ({ condition, handleClick }) => { 
    var className = condition ? 'list-row active' : 'inactive'; 
    return (
    <div className={className} onClick={() => handleClick()}> 
     <div>List</div> 
    </div> 
) 
} 

とコンテナだけでこのコンポーネントを使用します。

this.state.data.map((el ,i) => (
    <ChildComponent key={i} condition={this.state.condition} handleClick={() => this.handleClick()} /> 
)) 

私はあなたがあなたの子供にも状態を持つようにしたい場合はわからないが、それはあまりにも簡単に達成可能である、使用して同じ習慣。私は、反応（矢印の機能など）にES6の構文を使用することを強くお勧めします。

Answer 2

1つのアイテムだけをアクティブにしたい場合は、選択したアイテムを自分の状態で保持することができます。次に、onClickコールバックを作成して、選択した項目を変更することができます。あなたは、各リスト項目をアクティブと非アクティブを切り替えることができるようにしたい場合は

var MyList = React.createClass({ 
    getInitialState: function(){ 
    return { 
     data: ['foo', 'bar', 'baz'], 
     selected: null 
    } 
    }, 

    selectItem: function(el){ 
    this.setState({selected: el}); 
    }, 

    renderItem: function(el){ 
    var className = this.state.selected === el ? 'active' : 'inactive'; 
    var onClick = this.selectItem.bind(this, el); 
    return <li key={el} className={className} onClick={onClick}>{el}</li>; 
    }, 

    render: function() { 
    return (
     <ul> 
     { this.state.data.map(this.renderItem) } 
     </ul> 
    ); 
    } 
}); 

ReactDOM.render(
    <MyList />, 
    document.getElementById('container') 
); 

、あなたは同じアプローチを使用しますが、あなたのselected状態としてオブジェクトを保持することができます

getInitialState: function(){ 
    return { 
     data: ['foo', 'bar', 'baz'], 
     selected: {} 
    } 
    }, 

    selectItem: function(el){ 
    var selected = this.state.selected; 
    selected[el] = !selected[el]; 
    this.setState({selected: selected}); 
    }, 

そして、あなたのrenderItemを変更しますそれに応じて機能します：

var className = this.state.selected[el] ? 'active' : 'inactive'; 
var onClick = this.selectItem.bind(this, el);