React.js中实现列表项独立点击变色：解决点击全变红问题

嘿，我来帮你搞定这个点击所有项都变红的问题！核心原因是你现在用了一个全局的color状态来控制所有盒子的颜色，所以一点击所有盒子都会跟着变。要实现独立点击，得给每个列表项单独维护选中状态才行，下面是具体的修改思路和代码调整：

步骤1：修改App组件的状态和点击方法 #

把原来单一的color状态改成记录选中项的索引，这样我们能精准知道哪个项被点击了：

import React, { Component } from 'react';
import './App.css';
import MainTool from './components/Layout/MainTool/MainTool.js';
import Aux from './hoc/Aux.js';

class App extends Component {
  state = {
    MainList: ["GamePlay", "Visuals", "Audio", "Story"],
    selectedIndex: null // 用null表示初始没有选中项
  }

  // 修改点击方法，接收点击项的索引
  changeEle = (index) => {
    this.setState({ selectedIndex: index });
    // 如果需要支持切换选中/取消，改成：
    // this.setState(prev => ({
    //   selectedIndex: prev.selectedIndex === index ? null : index
    // }));
  }

  render() {
    return (
      <Aux>
        {/* 把selectedIndex传下去，而不是color */}
        <MainTool 
          MainList={this.state.MainList} 
          change={this.changeEle} 
          selectedIndex={this.state.selectedIndex}
        />
      </Aux>
    );
  }
}

export default App;

步骤2：调整MainTool组件的props传递 #

MainTool只需要把selectedIndex原封不动传给CheckBlock就行，修改后代码：

import React from 'react';
import './MainTool.css';
import CheckBlock from '../../CheckBlock/CheckBlock';

const MainTool = props => {
  return (
    <div className="mtborder">
      <CheckBlock 
        MainList={props.MainList} 
        change={props.change} 
        selectedIndex={props.selectedIndex}
      />
    </div>
  );
};

export default MainTool;

步骤3：修改CheckBlock组件，根据索引判断颜色 #

在循环渲染每个列表项时，判断当前项的索引是否等于selectedIndex，以此来设置背景色：

import React from 'react';
import './CheckBlock.css';
import Aux from '../../hoc/Aux';

const CheckBlock = props => {
  let mainList = [];
  for(let i = 0; i < props.MainList.length; i++) { // 用数组长度循环更灵活
    mainList[i] = (
      <li key={i} className="nameBox">
        {props.MainList[i]}
        <div 
          onClick={() => props.change(i)} // 点击时把当前索引传给父组件
          style={{
            backgroundColor: props.selectedIndex === i ? "red" : "white"
          }} 
          className="clickBox"
        ></div>
      </li>
    )
  }

  return (
    <Aux>
      <ul className="mainList">{mainList}</ul>
      <button>Enter</button>
    </Aux>
  );
};

export default CheckBlock;

额外说明：如果需要支持多选 #

要是你想实现点击多个项都变红，只需要把selectedIndex改成一个数组，记录所有选中的索引：

• App组件状态改成selectedIndexes: []
• 点击方法改成：

changeEle = (index) => {
  this.setState(prev => {
    const newIndexes = [...prev.selectedIndexes];
    if (newIndexes.includes(index)) {
      // 已选中就移除
      newIndexes.splice(newIndexes.indexOf(index), 1);
    } else {
      // 未选中就添加
      newIndexes.push(index);
    }
    return { selectedIndexes: newIndexes };
  });
}

• CheckBlock里判断颜色改成：

backgroundColor: props.selectedIndexes.includes(i) ? "red" : "white"

这样每个列表项的选中状态就完全独立啦，点击哪个哪个变红，不会影响其他项～

内容的提问来源于stack exchange，提问作者chree