选择不起作用on react material ui中的onClick IconComponent(droparrow-arrow) [英] Select is not working onClick IconComponent(dropdown-arrow) in react material ui

问题描述

下面是我的代码段.我遇到一个问题，当我单击IconComponent( dropdown-arrow )时，选择"组件未打开.

Below is my code snippet. I am facing an issue, when I click on IconComponent(dropdown-arrow), Select component is not opening.

<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>

推荐答案

在

In SelectInput.js(which Select leverages) the icon is rendered as follows:

<IconComponent className={classes.icon} />

使用自定义图标的方式，您忽略了SelectInput传递的className属性，该属性阻止了它的正确运行.

With the manner that you were customizing the icon, you were ignoring the className property that SelectInput passes which prevented it from behaving correctly.

以下是自定义图标的几个示例.第一种情况是直接使用图标(IconComponent={ExpandMoreIcon})，而没有将其包装在另一个函数中.第二种情况显示的内容与您要执行的操作更接近(支持在其上指定您自己的类).尽管className是SelectInput当前尝试指定的唯一属性，但我认为最好通过所有道具:

Below are a couple examples of customizing the icon. The first case uses the icon directly (IconComponent={ExpandMoreIcon}) without wrapping it in another function. The second case shows something closer to what you are trying to do (supporting specifying your own class on it). Though className is the only property that SelectInput tries to specify currently, I think you would be best off to pass through all the props:

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 classNames from "classnames";

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={classNames(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添加到图标的样式(可在

Here is the styling that Material-UI adds to the icon (found in NativeSelect.js which exports its styles so that Select.js can reuse them):

  icon: {
    // We use a position absolute over a flexbox in order to forward the pointer events
    // to the input.
    position: 'absolute',
    right: 0,
    top: 'calc(50% - 12px)', // Center vertically
    color: theme.palette.action.active,
    'pointer-events': 'none', // Don't block pointer events on the select under the icon.
  },

绝对位置使图标保持在Select的可单击区域内.如果没有绝对定位，该图标将导致构成选择"的不同元素发生偏移.单击应该应图标的位置继续工作，但是元素移动的方式导致选择"的总体布局不再有意义.

The absolute positioning keeps the icon within the clickable area of the Select. Without the absolute positioning, the icon will cause the different elements making up the Select to shift. Clicking in the place where the icon should be continues to work, but the way elements get shifted causes the overall layout of the Select to no longer make sense.

这篇关于选择不起作用on react material ui中的onClick IconComponent(droparrow-arrow)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！