javascript - 如何在单击时更改 ListItem 的样式？

Question

我在一个项目中使用 Material UI 和 React，我有一个组件，大致如下所示:

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 具有 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>
        );
    }
}