Выделение не работает. Нажмите IconComponent (стрелка вниз) в пользовательском интерфейсе.

Question

Ниже приведен мой фрагмент кода.Возникает проблема, когда я нажимаю на IconComponent ( раскрывающаяся стрелка ), компонент Select не открывается.

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

При настройке значка вы игнорировалиСвойство className, которое SelectInput проходит, что препятствует его правильному поведению.

Ниже приведено несколько примеров настройки значка.В первом случае значок используется напрямую (IconComponent={ExpandMoreIcon}) без переноса его в другую функцию.Второй случай показывает нечто более близкое к тому, что вы пытаетесь сделать (поддерживая указание на нем своего собственного класса).Хотя className является единственным свойством, которое 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 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 добавляет к значку (находится в NativeSelect.js, который экспортирует его стили, так что Select.js может использовать их повторно):

  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.Без абсолютного позиционирования значок приведет к смещению различных элементов, составляющих «Выбор».Нажатие на место, где значок должен быть, продолжает работать, но способ смещения элементов приводит к тому, что общая схема выбора больше не имеет смысла.