时间戳

首页 > 解决方案 > 反应卡内的自定义下拉菜单

javascript - 反应卡内的自定义下拉菜单

问题描述

我在 React 中使用react-jss和simple-flexbox样式继承了一个框架。CardComponent图像如下所示。我创建了一个GroupComponent以适合这张卡。

我现在想做的是，当用户单击一行时，会显示 n 行的列表，随后扩展卡并将其他条目推到列表大小以下（基本上是汉堡菜单推送，或类似于下拉菜单）。我还想要删除和添加到这些行的功能。

除了用于大多数事情之外，我对组件样式的经验很少，react-bootstrap所以我真的被困在这里。

这是GroupComponent：

const useStyles = createUseStyles((theme) => ({
    itemTitle: {
        ...theme.typography.itemTitle,
        color: theme.color.veryDarkGrayishBlue
    },
    itemValue: {
        color: theme.color.grayishBlue2
    }
}));

export const GroupComponent = ({ containerStyles, teams }) => {
    const theme = useTheme();
    const classes = useStyles({ theme });
    function renderEntry(title, value) {
        return (
                    <Row horizontal='space-between' vertical='center'>
                        <span className={classes.itemTitle}>{title}</span>
                        <span className={[classes.itemTitle, classes.itemValue].join(' ')}>
                            <img
                                src={require('../../assets/images/' + value + '.png')}
                                alt={value}
                                height='16'
                                width='16'
                            />
                        </span>
                    </Row>
        );
    }

    return (
        <CardComponent
            containerStyles={containerStyles}
            title={'Group ' + teams[0].groupName}
            items={[
                renderEntry(teams[0].name, teams[0].name, 0, 0),
                renderEntry(teams[1].name, teams[1].name, 0, 0),
                renderEntry(teams[2].name, teams[2].name, 0, 0),
                renderEntry(teams[3].name, teams[3].name, 0, 0)
            ]}
        ></CardComponent>
    );
};

export default GroupComponent;

以下是我希望显示的条目列表，并将其他国家推到卡片下方：

{
"players": [{
            "playerId": 1,
            "name": "Balotelli",
            "teamId": 1,
            "goalPercentage": 0.18,
            "numberOfGoals": 0
        }, {
            "playerId": 2,
            "name": "Baggio",
            "teamId": 1,
            "goalPercentage": 0.12,
            "numberOfGoals": 0
        }
    ]
}

最后是CardComponent. 如果您可以想象该players数组显示为下拉列表并将其他国家/地区行进一步向下推：

在此处输入图像描述

标签： javascriptreactjsflexboxdropdownjss

解决方案

我会在容器内的 renderEntry 中添加 n 行额外内容：

function renderEntry(title, value) {
  return (
    <Row horizontal='space-between' vertical='center'>
      <div className="main-content">
        <span className={classes.itemTitle}>{title}</span>
        <span className={[classes.itemTitle, classes.itemValue].join(' ')}>
          <img
            src={require('../../assets/images/' + value + '.png')}
            alt={value}
            height='16'
            width='16'
            />
        </span>
      </div>
      <div className="extra-content">
        <div>Player 1</div>
        <div>Player 2</div>
        <div>Player 3</div>
      </div>
    </Row>
  );
}

然后隐藏 div 我将创建一个将高度设置为 0 的 css 类，当可选的隐藏类添加到 any时<div className="extra-content">；

.extra-content.hidden {
  height: 0;
}

然后我会添加一个 css 动画来使高度变化平滑：

.extra-content {
  transition: height 1s;
}

renderEntry然后为每个添加或删除隐藏类的单击事件处理程序添加：

function renderEntry(title, value) {
  const hideContent = (e) => {
    e.target.querySelector('.extra-content').classList.toggle('hidden');
  }
  return (
    <Row horizontal='space-between' vertical='center' onClick={hideContent}>

最后，您可以对其进行设置，以便将隐藏类添加为标准：

<div className="extra-content hidden">

请参阅 codepen 上的示例

推荐阅读