React类组件点击事件无法更新isSelected props的问题咨询

咱们来一步步拆解这个问题：

为什么点击时isSelected props不更新？ #

你这段代码里有个核心误区：子组件MenuElem里点击时调用的this.setState({isSelected: true})，修改的是子组件自身的state，而不是父组件传递过来的props.isSelected。

• 父组件Parent给两个MenuElem传递的是固定值：<MenuElem isSelected={false} />和<MenuElem isSelected={true} />，这些props不会因为子组件自己的state变化而改变。
• 子组件里的className判断用的是this.props.isSelected，而不是自己state里的isSelected，所以哪怕子组件setState了，className也不会跟着变。

简单说：你把状态的管理位置搞错了，选中状态应该由父组件统一控制，而不是子组件自己维护。

如何实现点击时添加"is-active"类？ #

正确的做法是把选中状态的控制权放在父组件Parent中，子组件只负责触发点击事件，通知父组件更新状态。具体修改如下：

1. 父组件添加状态管理 #

给Parent组件添加state来记录当前选中的菜单元素（比如用索引或者唯一标识），同时提供一个回调函数给子组件，用于接收点击事件。

2. 子组件调用父组件的回调 #

子组件MenuElem点击时，调用父组件传递过来的回调函数，而不是自己setState。

修改后的完整代码： #

import React, { Component } from 'react';

class Parent extends Component {
  // 初始化state，记录当前选中的菜单索引，默认-1表示未选中
  state = {
    selectedIndex: -1
  };

  // 定义回调函数，接收子组件传递的索引
  handleMenuSelect = (index) => {
    this.setState({ selectedIndex: index });
  };

  render() {
    return (
      <ul>
        {/* 给每个MenuElem传递isSelected（根据索引判断）和onSelect回调 */}
        <MenuElem 
          isSelected={this.state.selectedIndex === 0} 
          onSelect={() => this.handleMenuSelect(0)} 
        />
        <MenuElem 
          isSelected={this.state.selectedIndex === 1} 
          onSelect={() => this.handleMenuSelect(1)} 
        />
      </ul>
    );
  }
}

class MenuElem extends Component {
  render() {
    // 使用props里的isSelected判断className，点击时调用props.onSelect
    return (
      <li 
        onClick={this.props.onSelect} 
        className={this.props.isSelected ? "is-active" : ""}
      >
        菜单选项
      </li>
    );
  }
}

这样修改后，当点击某个MenuElem时，会触发父组件的handleMenuSelect方法，更新父组件的selectedIndex状态，进而传递给子组件新的isSelected props，className就会正确切换为"is-active"啦。

如果你的菜单是动态生成的（比如从数组循环渲染），这个方案也同样适用，只需要把索引换成数组项的唯一标识即可。

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