如何设置 Material-UI 中的 Select 组件在选择其中一项后失去焦点状态

Question

预期行为：

选择一个item后，Menu列表会立即关闭，Select组件失去焦点状态，borderBottom变为1px solid 和 backgroundColor 变成 white.

当前行为：

Select behavior after selecting an item

如上图所示，borderBottom为2px solid而backgroundColor 不是 white 这表明 Select 组件处于焦点状态。

我应该怎么做才能达到预期的行为？

补充说明：

实际上让我烦恼的是 Select 组件的焦点外观，而不是焦点本身，我想要的是 fonts.google.com 中的行为。选择样式（例如 Bold 700）后，是的 Select 组件仍处于焦点状态，但它没有显示任何焦点迹象，这正是我真正想要的。

Answer 1

我不知道我是否正确理解了这个问题，但我认为你可以使用参考来解决这个问题，因为 React docs 状态：

[...] Managing focus, text selection, or media playback.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.selector= React.createRef();
    }
    render() {
        return <Selector ref={this.selector}>[...]</Selector>;
    }
}

然后您可以通过执行 this.selector.current 访问元素本身，您可以通过单击选择器的元素执行 this.selector.current.focus() 或 this.selector.current.blur() 来设置（或取消设置）它的焦点。如果你想做的是将另一个元素聚焦在点击上，你应该获取你想要聚焦的元素的 ref 并以相同的方式进行。

希望这就是您所需要的！

Answer 2

下面的示例展示了如何自定义 Select 的焦点外观。

您可以在我的回答中找到关于自定义下划线的一些解释：

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";
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";

const styles = theme => ({
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  },
  select: {
    "&:focus": {
      backgroundColor: "white"
    }
  },
  selectInput: {
    "&:hover:not($disabled):not($focused):not($error):before": {
      borderBottomWidth: 1
    },
    "&:after": {
      borderBottomWidth: 1
    }
  },
  disabled: {},
  focused: {},
  error: {}
});

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

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

  render() {
    const { classes } = this.props;
    const selectInputClasses = {
      root: classes.selectInput,
      disabled: classes.disabled,
      focused: classes.focused,
      error: classes.error
    };

    return (
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="age-simple">Age</InputLabel>
        <Select
          value={this.state.age}
          onChange={this.handleChange}
          input={<Input classes={selectInputClasses} />}
          inputProps={{
            name: "age",
            id: "age-simple",
            classes: { select: classes.select }
          }}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    );
  }
}

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

export default withStyles(styles)(SimpleSelect);

如何设置 Material-UI 中的 Select 组件在选择其中一项后失去焦点状态

How to set Select component in Material-UI to loose its focus state after selecting one of its item

css

html-select

focus

reactjs

material-ui