为什么标签显示在选择框内？答案

【问题标题】：why label is display inside select box?为什么标签显示在选择框内？
【发布时间】：2019-02-17 16:46:34
【问题描述】：

为什么我的选择框标签显示在 select 框内。举个例子，我没有使用 react -material-validator 。它像这样显示 https://codesandbox.io/s/5vr4xp8854

当我尝试使用 react-material-ui-form-validator 插件验证我的选择框时，我的标签进入了 select bx 为什么这是我的代码 插件： https://www.npmjs.com/package/react-material-ui-form-validator https://codesandbox.io/s/38x8q8zpm5

其次，当我提交时，我的标签没有显示为红色，为什么？

function App() {
  return (
    <div className="App">
      <ValidatorForm onSubmit={() => {}} className="" autoComplete="off">
        <FormControl>
          <InputLabel shrink={true} htmlFor="age-simple">
            Age
          </InputLabel>

          <SelectValidator
            required
            value=""
            name="name"
            displayEmpty
            validators={["required"]}
            errorMessages={["this field is required", "email is not valid"]}
            inputProps={{
              name: "age",
              id: "age-simple",
              shrink:true
            }}
            SelectProps={{
              displayEmpty: true,
              shrink:true
            }}
            input={<Input id="age-simple" />}
            className=""
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </SelectValidator>
        </FormControl>
        <Button type="submit"> submit</Button>
      </ValidatorForm>
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs validation material-design material-ui

【解决方案1】：

看起来Material UI FormValidator 包只需要一个label 属性。你应该删除

<InputLabel htmlFor="age-simple">
   Age
</InputLabel>

并为您的SelectValidator 添加label 和InputLabelProps with shrink: true（如限制Here 中所述）属性，例如：

<SelectValidator
   required
   label="Age"
   InputLabelProps={{ shrink: true }}
   value=""
   name="name"
   .......

这也将解决当用户在没有选择的情况下点击提交时您的标签不会显示为红色的问题。

【讨论】：