クリックされなかった要素の基本クラス名を返す方法

Question

カテゴリをクリックするとスタイルが変更されます。ハンドルを変更するとスタイルが自動的に別のカテゴリにリセットされますか？

class CategoryOfMenu extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { itemmenu: this.props.data[0] }; 
    } 

    handleClick(id, e) { 
    this.setState({ itemmenu: this.props.data[id] }); 
    console.log(this.props.data[id].categorymenu); 
    if (e.target.className === 'liik1') { 
     e.target.className = 'liik'; 
    } else { 
     e.target.className = 'liik1'; 
    } 
    } 

    render() { 
    var categoryMenu = this.props.data.map(function(data, id) { 
     return (
     <li key={id} data={data} onClick={this.handleClick.bind(this, id)}> 
      {' '}{data.categorymenu}{' '} 
     </li> 
    ); 
    }, this); 

    return (
     <div className="pic"> 
     <div className="menu"> 
      <h3>Menu</h3> 
      <ul> 
      {categoryMenu} 
      </ul> 
     </div> 
     <ItemOfMenu data={this.state.itemmenu} /> 
     </div> 
    ); 
    } 
} 

Answer 1

いいえ、それを行うには2つの方法があります。

最初に、選択したアイテムを示す自分の状態で別の小道具を作成します。

2番目の選択された状態をすべてフラッシュして新しいものを設定します。

これが最初の方法です。

class Menu extends React.Component { 
 
    state = { 
 
    items: ['first', 'second', 'third'], 
 
    selected: 0, 
 
    } 
 
    
 
    getClassName (index) { 
 
    const defaultClass = 'menuItem'; 
 
    
 
    if (index === this.state.selected) { 
 
     return `${defaultClass} isSelected`; 
 
    } 
 
    
 
    return defaultClass; 
 
    } 
 

 
    render() { 
 
    return (
 
     <ul> 
 
     {this.state.items.map((item, index) => (
 
      <li 
 
      key={item} 
 
      className={this.getClassName(index)} 
 
      onClick={() => this.setState({selected: index})} 
 
      > 
 
      {item} 
 
      </li> 
 
     ))} 
 
     </ul> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<Menu />, document.querySelector('#root'));

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.menuItem { 
 
    font-family: monospace; 
 
    font-size: 18px; 
 
    text-decoration: underline; 
 
    cursor: pointer; 
 
} 
 

 
.isSelected { 
 
    text-decoration: none; 
 
    color: tomato; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="root"></div>