React中在else分支实现类名切换的技术求助

我帮你梳理下实现步骤，首先得注意：React 里元素的类名要用className而不是原生 HTML 的class，这是第一个要修正的基础点。接下来我们通过状态管理来实现「仅未占用座位点击切换类名」的逻辑：

步骤1：初始化状态时添加切换标记 #

我们需要给每个座位条目加一个isToggled状态，用来跟踪它是否被点击切换。在构造函数初始化 state 时，对原始数据做一次映射处理：

constructor() { 
  super(); 
  // 给每个数据条目新增isToggled属性，默认初始为false
  this.state = { 
    pizzaData: data.map(item => ({ ...item, isToggled: false })) 
  };
  // 绑定点击处理函数到当前实例（如果不用箭头函数的话必须加这一步）
  this.handleClick = this.handleClick.bind(this);
}

步骤2：编写点击切换的处理函数 #

实现handleClick函数，通过索引定位到对应的座位条目，仅当座位未被占用（occupied为 false）时，切换它的isToggled状态：

handleClick(index) {
  this.setState(prevState => ({
    pizzaData: prevState.pizzaData.map((entry, i) => {
      // 只处理目标索引且未被占用的条目
      if (i === index && !entry.occupied) {
        return { ...entry, isToggled: !entry.isToggled };
      }
      return entry;
    })
  }));
}

步骤3：渲染时根据状态动态设置类名 #

在renderList方法里，结合occupied和isToggled的状态决定每个<li>的类名，同时给每个 li 绑定点击事件：

renderList(info){ 
  const list = this.state.pizzaData.map((entry, index) => {
    let liClass;
    if (entry.occupied) {
      liClass = "coloring";
    } else {
      // 未被占用时，根据isToggled切换类名（这里示例切换为colored和colored toggled，你可以改成自己需要的类名）
      liClass = entry.isToggled ? "colored toggled" : "colored";
    }

    return (
      <li 
        className={liClass} 
        key={index}
        onClick={() => this.handleClick(index)}
      >
        Seat: {entry.seat}{entry.row}
      </li>
    );
  }); 
  return( <ul>{list}</ul> ) 
}

完整组件代码 #

把以上步骤整合起来，完整的组件代码如下（补充了你原来遗漏的render方法）：

class Inf extends React.Component { 
  constructor() { 
    super(); 
    this.state = { 
      pizzaData: data.map(item => ({ ...item, isToggled: false })) 
    };
    this.handleClick = this.handleClick.bind(this);
  } 

  handleClick(index) {
    this.setState(prevState => ({
      pizzaData: prevState.pizzaData.map((entry, i) => {
        if (i === index && !entry.occupied) {
          return { ...entry, isToggled: !entry.isToggled };
        }
        return entry;
      })
    }));
  }

  renderList(info){ 
    const list = this.state.pizzaData.map((entry, index) => {
      let liClass = entry.occupied ? "coloring" : (entry.isToggled ? "colored toggled" : "colored");

      return (
        <li 
          className={liClass} 
          key={index}
          onClick={() => this.handleClick(index)}
        >
          Seat: {entry.seat}{entry.row}
        </li>
      );
    }); 
    return( <ul>{list}</ul> ) 
  } 

  render() {
    return this.renderList();
  }
}

关键细节说明 #

• 状态不可变：修改 state 时我们用map返回新的数组和对象，而不是直接修改原数据，这是 React 状态更新的基本原则，避免意外的状态污染。
• 精准控制切换范围：在handleClick里判断!entry.occupied，确保只有未被占用的座位会响应点击切换类名，符合你的需求。
• 类名灵活调整：你可以把示例中的colored toggled改成自己需要的目标类名，比如colored-active之类的，适配你的样式需求。

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