改變單利反應狀態

Question

如何使用onClick添加班級到單人li元素？當我點擊任何li時，state被更改時，所有div的獲得item-active類。

我有從映射陣列index，但我不知道在那裏（我相信handleClick()？）我應該用它來製作它的工作...

//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

嘗試是這樣的：

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。