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对象属性内的样式。但是，其他未被点击的ListItems不应该改变它们的风格。此外，如果用户已经单击了ListItem并决定单击另一个ListItem，那么我希望先前单击的ListItem将其样式更改为styles.listItem内的默认样式和新单击的ListItem以获取{{ 1}}样式。因此，在任何时候，只有零（最初）或其中一个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>
        );
    }
}

Answer 2

将React 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>
        );
    }
}

如何在点击时更改ListItem的样式？

2 个答案: