Select 在 React Material UI 中的 Click IconComponent（下拉箭头）不起作用

Question

下面是我的代码片段。 我遇到了一个问题，当我点击 IconComponent( dropdown-arrow ) 时，选择组件没有打开。

<Select
  IconComponent={() => (
    <ExpandMore className="dropdown-arrow" />
  )}
  onChange={this.handleSelectUpdate.bind(this)}
  value={this.state.somestate}
  inputProps={{
    name: "someprops1",
    id: "someprops1"
  }}
  disabled={this.props.someprops1.length === 1}
  className="dropdown"
>
  >
  {_.map(this.props.someprops2, (item, id) => {
    return (
      <MenuItem value={item.somekey} key={id}>
        {item.somekey}
      </MenuItem>
    );
  })}
</Select>

Answer 1

在SelectInput.js （ Select利用）中，图标呈现如下：

<IconComponent className={classes.icon} />

通过自定义图标的方式，您忽略了SelectInput传递的 className 属性，这会阻止它正确运行。

以下是自定义图标的几个示例。 第一种情况直接使用图标（ IconComponent={ExpandMoreIcon} ）而不将其包装在另一个函数中。 第二种情况显示了更接近您尝试做的事情（支持在其上指定您自己的类）。 尽管className是SelectInput当前尝试指定的唯一属性， SelectInput我认为您最好通过所有道具：

const iconStyles = {
  selectIcon: {
    color: "green"
  }
};
const CustomExpandMore = withStyles(iconStyles)(
  ({ className, classes, ...rest }) => {
    return (
      <ExpandMoreIcon
        {...rest}
        className={classNames(className, classes.selectIcon)}
      />
    );
  }
);

这是完整的示例：

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import clsx from "clsx";

const styles = (theme) => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing.unit * 2
  }
});
const iconStyles = {
  selectIcon: {
    color: "green"
  }
};
const CustomExpandMore = withStyles(iconStyles)(
  ({ className, classes, ...rest }) => {
    return (
      <ExpandMoreIcon
        {...rest}
        className={clsx(className, classes.selectIcon)}
      />
    );
  }
);

class SimpleSelect extends React.Component {
  state = {
    age: "",
    name: "hai"
  };

  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.root} autoComplete="off">
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="age-simple">Age</InputLabel>
          <Select
            value={this.state.age}
            onChange={this.handleChange}
            inputProps={{
              name: "age",
              id: "age-simple"
            }}
            IconComponent={ExpandMoreIcon}
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        </FormControl>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="age-simple">Age</InputLabel>
          <Select
            value={this.state.age}
            onChange={this.handleChange}
            inputProps={{
              name: "age",
              id: "age-simple"
            }}
            IconComponent={CustomExpandMore}
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        </FormControl>
      </form>
    );
  }
}

SimpleSelect.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(SimpleSelect);

这是 Material-UI 添加到图标的样式（在NativeSelect.js中找到，它导出其样式，以便Select.js可以重用它们）：

  icon: {
    // We use a position absolute over a flexbox in order to forward the pointer events
    // to the input and to support wrapping tags..
    position: 'absolute',
    right: 0,
    top: 'calc(50% - 12px)', // Center vertically
    pointerEvents: 'none', // Don't block pointer events on the select under the icon.
    color: theme.palette.action.active,
    '&$disabled': {
      color: theme.palette.action.disabled,
    },
  },
  /* Styles applied to the icon component if the popup is open. */
  iconOpen: {
    transform: 'rotate(180deg)',
  },
  /* Styles applied to the icon component if `variant="filled"`. */
  iconFilled: {
    right: 7,
  },
  /* Styles applied to the icon component if `variant="outlined"`. */
  iconOutlined: {
    right: 7,
  },

绝对定位将图标保持在Select的可点击区域内。 如果没有绝对定位，图标将导致组成 Select 的不同元素发生移动。 单击图标应该继续工作的位置，但元素移动的方式导致 Select 的整体布局不再有意义。

Answer 2

如果您使用的是材质 UI 图标，则只需在图标组件中添加以下 3 行 css：

position: absolute !important;
right: 0 !important;
pointer-events: none !important;

Answer 3

您需要做的就是将 className 指针事件设置为 none 和 position - absolute 用于图标，position - relative 用于选择。

这是一个例子：

icon: {
  pointerEvents: 'none',
  position: 'absolute',
  right: '10px'
},