为什么标签显示在选择框中？

Question

为什么我的选择框标签显示在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>
  );
}

Answer 1

看起来Material UI FormValidator包仅带有label属性。 你应该删除

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

并添加label和InputLabelProps与收缩：真（如限制讨论下面的属性为您） SelectValidator ，例如：

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

这也可以解决您的标签在用户无选择的情况下点击“提交”时不会显示为红色的情况。