クリック時にListItemのスタイルを変更するにはどうすればよいですか？

Question

私はマテリアルのUIを使用していて、プロジェクトのために反応し、私が部品を持って、そのおおよそ次のようになります。

import React, { Component } from 'react'; 
import { List, ListItem } from 'material-ui'; 
import PropTypes from 'prop-types'; 

class MyComp extends Component { 
    constructor(props) { 
     super(props); 

     this.onClickMethod = this.onClickMethod.bind(this); 
    } 

    onClickMethod() { 
     // removed for brevity 
    } 

    render() { 
     return (
      <div> 
       <List> 
        {this.props.myData.map(pp => { 
         return (
          <ListItem key={pp.name} 
             style={styles.listItem} 
             primaryText={pp.name} 
             onClick={this.onClickMethod} 
          /> 
         ) 
        })} 
       </List> 
      </div> 
     ); 
    } 
} 

const styles = { 
    listItem: { 
     // removed for brevity, includes some styles 
    }, 
    listItemClicked: { 
     // removed for brevity, includes different styles than the ones in listItem 
    }, 
}; 

MyComp.propTypes = { 
    myData: PropTypes.array.isRequired, 
}; 

export default MyComp; 

は今の点は、私が最初にすべての私のListItemは、同じスタイルを持つようにしたいということです、つまり、オブジェクトのプロパティであるstyles.listItem内のスタイルです。その後、ユーザーが特定のListItemをクリックすると、そのスタイルがstyles.listItemClickedオブジェクトプロパティ内にあるスタイルに変更されます。ただし、残りの未使用ListItemはスタイルを変更すべきではありません。さらに、ユーザーがすでにListItemをクリックして別のListItemをクリックすると、以前にクリックされたListItemのスタイルを、styles.listItem内の既定のスタイルに変更し、新しくクリックしたListItemをstyles.listItemClickedスタイルに変更します。そのため、いつでもゼロ（最初）またはListItemの1つだけがstyles.listItemClicked内のスタイルを持つようにします。どのようにReactでこれを達成するためのアイデア？

Answer 1

クリックされたlistItemのインデックスが含まれている状態を維持し、この

class MyComp extends Component { 
    constructor(props) { 
     super(props); 
     // Initialize a state which contain the index of clicked element (initially -1) 
     this.state = { indexOfClickedItem: -1}; 
     this.onClickMethod = this.onClickMethod.bind(this); 
    } 

    onClickMethod(index) { 
     // removed for brevity 
     // When clicked then set the state with the index of clicked item 
     this.setState({indexOfClickedItem: index}); 
    } 

    render() { 
     return (
      <div> 
       <List> 
        {this.props.myData.map((pp,index) => { 
         return (
          <ListItem key={pp.name} 
             // Use simple condition to change the style of clicked element 
             style={this.state.indexOfClickedItem === index ? styles.listItemClicked : styles.listItem} 
             primaryText={pp.name} 
             onClick={this.onClickMethod.bind(this,index)} 
          /> 
         ) 
        })} 
       </List> 
      </div> 
     ); 
    } 
} 

Answer 2

使用のような特定の項目のスタイルを変更するには、簡単な条件を使用して、このような何かのためにstateに反応：

class MyComp extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      currentSelectedItem: '' 
     }; 
     this.onClickMethod = this.onClickMethod.bind(this); 
    } 
    onClickMethod() { 
     // removed for brevity 
     this.setState({ currentSelectedItem: pp.name }); // You must somehow manage to get the pp.name from the array here, assuming it is unique 
    } 
    render() { 
     return (
      <div> 
       <List> 
        {this.props.myData.map(pp => { 
         return (
          <ListItem key={pp.name} 
             style={(this.state.currentSelectedItem === pp.name)? 
             styles.listItemClicked : styles.listItem} 
             primaryText={pp.name} 
             onClick={this.onClickMethod} 
          /> 
         ) 
        })} 
       </List> 
      </div> 
     ); 
    } 
}