ReactJS模态框点击TD无显示问题求助

你的代码存在两个核心问题导致模态框无法正常显示：

• showMembers函数返回的JSX没有被纳入组件的渲染流程，仅在事件处理函数中调用该函数，React不会自动将返回的JSX渲染到页面上。
• 模态框容器的stlye是拼写错误，正确写法应为style。

修改后的完整代码示例 #

// 组件初始化state
constructor(props) {
  super(props);
  this.state = {
    showListOfMembers: false,
    currentMembers: []
  };
}

handleClickToOpen = (key, membersArray) => {
  // 更新状态：显示模态框，同时保存当前点击的成员数据
  this.setState({ 
    showListOfMembers: true,
    currentMembers: membersArray[key]
  });
};

handleToClose = () => {
  this.setState({ showListOfMembers: false });
};

render() {
  const { membersArray } = this.props;
  const { showListOfMembers, currentMembers } = this.state;

  return (
    <div>
      {/* 表格部分 */}
      <table>
        <tbody>
          {Object.keys(membersArray).map(key => (
            <tr key={key}>
              <td 
                onClick={() => this.handleClickToOpen(key, membersArray)} 
                style={{ cursor: 'pointer' }}
              >
                {membersArray[key].length} members
                Click for names
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* 模态框直接放在render中，由state控制显示 */}
      <div style={{}}>
        <Dialog open={showListOfMembers} onClose={this.handleToClose}>
          <DialogTitle>Members List</DialogTitle>
          <DialogContent>
            <DialogContentText>
              {/* 渲染成员列表 */}
              {currentMembers.map((member, idx) => (
                <div key={idx}>{member}</div>
              ))}
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleToClose} color="primary" autoFocus>
              Close
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    </div>
  );
}

关键修改说明 #

1. 将模态框纳入渲染流程：把原showMembers中的模态框代码直接移到组件的render方法内，React会根据showListOfMembers的状态自动控制模态框的显示/隐藏。
2. 保存点击数据到state：新增currentMembers状态存储点击单元格对应的成员数据，方便模态框内渲染成员列表。
3. 修正拼写错误：将stlye改为正确的style。
4. 简化事件逻辑：handleClickToOpen仅负责更新状态，无需调用showMembers函数，模态框的显示完全由状态驱动。

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