Card 点击选中后改变样式

可以通过在Card组件的onClick事件中设置一个状态来控制样式的变化。具体实现过程如下：

1. 在Card组件的构造函数中定义一个状态selected，初始值为false。

constructor(props) {
    super(props);
    this.state = {
        selected: false,
    };
}

2. 在Card组件的onClick事件中，设置selected状态的值为true或false，表示该卡片是否被选中。

handleClick = () => {
    this.setState({
        selected: !this.state.selected,
    });
}

3. 在Card组件的className属性中，根据selected状态的值动态地指定不同的CSS类名。可以使用三元表达式来实现：

<Card
    key={index}
    className={this.state.selected ? styles.selected_card : styles.single_card}
    extra={cardExtra}
    onClick={this.handleClick}
/>

4. 在CSS文件中定义两个不同的CSS类名，分别对应选中和未选中时的样式：

.selected_card {
    background-color: #87cefa;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.single_card {
    /* 未选中时的样式 */
}

这样，当点击Card组件时，就会根据selected状态的值动态地改变样式。