シングルリースで状態を変更する

Question

を使用してli要素を1つのクラスに追加するにはどうすればよいですか？ liをクリックした瞬間、stateが変更された場合、divはすべてitem-activeクラスになります。

//import {cost} from '...'; 
export class CostFilter extends Component { 
    constructor(props) { 
    super(props); 

    this.state = {active: "item-not-active"}; 
    this.handleClick = this.handleClick.bind(this); 
    } 
    handleClick(){ 
    let isActive = this.state.active === "item-not-active" ? "item-active" : "item-not-active"; 
    this.setState({active: isActive}); 
    } 


    render() { 
    return (
     <ul> 
      {cost.map((element, index) => 
       <li onClick={this.handleClick} value={`cost-${element.cost}`} key={index}> 
        <div className={`hs icon-${element.cost} ${this.state.active}`}></div> 
       </li> 
     )} 
     </ul> 
    ); 
    } 
} 

Answer 1

はこのような何かを試してみてください...

は私がマッピングされた配列からindexを持っていますが、私はそれが動作させるために（私はhandleClick()に信じますか？）私はそれを使用する必要がありますどこか分からない。

export class CostFilter extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {activeIndex: null}; 
    } 
    handleClick(index) { 
    let activeIndex = this.state.activeIndex === index ? null : index; 
    this.setState({activeIndex}); 
    } 

    render() { 
    return (
     <ul> 
     {cost.map((element, index) => 
      <li onClick={this.handleClick.bind(this, index)} value={`cost-${element.cost}`} key={index}> 
      <div className={` 
        hs 
        icon-${element.cost} 
        ${this.state.activeIndex === index && 'item-active'} 
       `}></div> 
      </li> 
     )} 
     </ul> 
    ); 
    } 
} 

Answer 2

私はこれがあなたが探していることを望みます。 fiddle

const data = ['Hello', 'World'] 

class Example extends React.Component { 
    constructor(){ 
    this.state = { 
     isActive: -1 
    } 
    } 
    click(key,e){ 
    this.setState({ 
     isActive: key 
    }) 
    } 
    render(){ 
    const costsList = this.props.costs.map((item, key) => { 
     return <li key={key} 
      className={this.state.isActive === key ? 'foo' : ''} 
      onClick={this.click.bind(this, key)}> 
      {item} 
     </li> 
    }) 
    return <ul> 
     {costsList} 
    </ul> 
    } 
} 

React.render(<Example costs={data}/>, document.getElementById('container')); 

Answer 3

あなたのコンポーネントの状態で、クリックされた要素のインデックスを格納し、現在のインデックスは、状態のキーと等しい場合はマップであなたのレンダリング機能で確認することができます。このようなもの：

let data = ['Item 1', 'Item 2', "Item 3"]; 

class Test extends React.Component { 
    constructor(){ 
     this.state = { 
      active: null 
     } 
    } 

    handleClick(i){ 
     this.setState({active: i}); 
    } 

    render(){ 
     return <ul>{this.props.data.map((item, i) => <li key={i} className={this.state.active === i ? 'active' : ''} onClick={this.handleClick.bind(this, i)}>{item}</li>)}</ul> 
    } 
} 

React.render(<Test data={data}/>, document.getElementById('container')); 

ここにはfiddleがあります。