删除 Material-UI 选择文本字段上的标签答案

【问题标题】：Remove Label on Material-UI Select Text Field删除 Material-UI 选择文本字段上的标签
【发布时间】：2019-07-03 23:51:12
【问题描述】：

我有一个性别选择字段，其标签位于选择的中心，这是所需的布局。

当用户选择此字段时，标签会飞到左上角，如图所示。我想要做的是完全删除标签并用蓝色边框替换它。

这是我的代码：

          <TextField
            id='gender-select'
            select
            label="Gender"
            className={classes.textField}
            value={gender}
            onChange={data => setGender(data.target.value)}
            margin='normal'
            variant='outlined'>
            {genders.map(option => (
              <MenuItem key={option.value} value={option.value}>
                {option.label}
              </MenuItem>
            ))}
          </TextField>

这是我的样式代码：

const useStyles = makeStyles(theme => ({
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    marginTop: theme.spacing(1),
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: '#CACACA'
      },
      '&:hover fieldset': {
        borderColor: '#007AFF'
      },
      '&.Mui-focused hover': {
        borderColor: '#007AFF'
      },
      '&.Mui-focused fieldset': {
        borderColor: '007AFF'
      }
    }
  }
}))

我尝试在 label 属性上添加一个条件来取消它，例如：

label={gender== "" ? "Gender": null}

但这只是给了我一个空白行来代替标签。

当字段处于焦点时，如何更改蓝线的标签？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您的解决方案不太奏效的原因是 TextField 不注意标签的更改。它会在初始渲染后计算出an effect 中的标签宽度。

幸运的是，有一种简单的方法可以避免出现缺口。您可以使用InputLabelProps={{shrink: false}} 防止标签“缩小”。

这是一个完整的工作示例：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';

const genders = [
  {
    value: 'M',
    label: 'Male',
  },
  {
    value: 'F',
    label: 'Female',
  },
  {
    value: 'O',
    label: 'Other',
  },
];

const useStyles = makeStyles(theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 100
  },
  dense: {
    marginTop: theme.spacing(2),
  },
  menu: {
    width: 100,
  },
}));

export default function OutlinedTextFields() {
  const classes = useStyles();
  const [gender, setGender] = React.useState("");

  const handleChange = event => {
    setGender(event.target.value);
  };

  return (
    <form className={classes.container} noValidate autoComplete="off">
      <TextField
        id="outlined-select-gender"
        select
        label={gender=== "" ? "Gender": ""}
        className={classes.textField}
        value={gender}
        onChange={handleChange}
        InputLabelProps={{shrink: false}}
        SelectProps={{
          MenuProps: {
            className: classes.menu,
          },
        }}
        margin="normal"
        variant="outlined"
      >
        {genders.map(option => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </TextField>
    </form>
  );
}

【讨论】：

这可行，但会产生另一个错误，即标签永远不会离开，您最终会在标签上写下文本。
@HarshPhoujdar 不，在我的示例中不是（您可以在沙箱中使用它）。当值（示例中为gender）不为空时，通过label={gender=== "" ? "Gender": ""} 将标签更改为空字符串。

【解决方案2】：

这是最简单的方法：

      <TextField
        id='gender-select'
        select
        placeholder="Gender" // <<<<< See here
        className={classes.textField}
        value={gender}
        onChange={data => setGender(data.target.value)}
        margin='normal'
        variant='outlined'>
        {genders.map(option => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </TextField>

【讨论】：