Javascript React 中可以点击 Select 下拉菜单

发布于08月21日

我有一个可折叠的东西，你可以点击它来显示或隐藏下拉菜单.目前，只能单击单选按钮所在位置.我想要的是整个区域是可点击的，这样你就可以通过点击那里的任何地方来 Select 下拉列表.我怎么才能做到这一点呢？

Codesandbox-&gt；CLICK HERE

<Collapse in={expanded} timeout="auto" unmountOnExit>
  <Card className="mb-2">
    <CardContent className="p-0">
      <FormControl className="w-100" component="fieldset">
        <RadioGroup value={activeOption} onChange={onSubOptionClicked}>
          {subOptions.map((subOption) => (
            <ListSubOptionItem
              {...subOption}
              activeOption={activeOption}
              key={subOption.label}
            />
          ))}
        </RadioGroup>
      </FormControl>
    </CardContent>
  </Card>
</Collapse>

推荐答案

更新ListSubOptionItem组件以将所有UI/可视内容呈现为输入/控件的标签，以便完全可以点击.

import {
  ...,
  FormControlLabel as BaseFormControlLabel,
  ...,
  styled,
} from "@mui/material";

const StyledListSubOptionLabel = styled(ListItemText)({
  // marginLeft: "32px", <-- Removed
  marginTop: "-4px !important"
});

...

const FormControlLabel = styled(BaseFormControlLabel)({
  alignItems: "baseline", // <-- align checkmark with text
  ".MuiFormControlLabel-label": {
    flexGrow: 1, // <-- so label grows to fill width
  },
});

const ListSubOptionItem = ({
  imgUrl,
  label,
  subLabel,
  maxWidth,
  disabled = false,
  value = null,
  activeOption = null
}) => {
  return (
    <FormControlLabel
      disabled={disabled ?? false}
      className={classNames("m-0 sub-option-item", {
        active: activeOption === value
      })}
      control={<StyledRadio />}
      label={
        <StyledListSubOptionItemWrapper
          className={classNames("d-flex justify-content-between py-3 pr-3", {
            "align-items-start": !!subLabel,
            "align-items-center": !subLabel
          })}
        >
          <Stack>
            {label}
            {subLabel && (
              <StyledListSubOptionLabel
                classes={{ secondary: "text-gray" }}
                secondary={subLabel}
              />
            )}
          </Stack>
          {imgUrl && (
            <img
              src={imgUrl}
              alt={imgUrl}
              {...(subLabel && { className: "mt-1" })}
              style={{
                opacity: disabled ? 0.2 : 1,
                maxWidth: maxWidth ?? "80px",
                width: "100%"
              }}
            />
          )}
        </StyledListSubOptionItemWrapper>
      }
      value={value}
    />
  );
};