почему метка отображается внутри поля выбора? - PullRequest
Новая
       10

почему метка отображается внутри поля выбора?

0 голосов
/ 13 сентября 2018

почему мой ярлык окна выбора отображается внутри поля select. Возьмите пример, я не использую реагирующий -материал-валидатор. https://codesandbox.io/s/5vr4xp8854

когда я пытался проверить свой блок выбора, используя плагин Reaction-material-ui-form-validator, моя метка попала в список выбора почему вот мой код плагин: https://www.npmjs.com/package/react-material-ui-form-validator https://codesandbox.io/s/38x8q8zpm5

enter image description here

Во-вторых, когда я отправляю мой ярлык не отображается красным цветом, почему? 

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>
  );
}

1 Ответ

0 голосов
/ 13 сентября 2018

Похоже, Материал пользовательского интерфейса FormValidator пакет просто принимает label свойство.Вы должны удалить 

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

и добавить label и InputLabelProps с помощью shrink: true (как описано в ограничениях Here ) для ваших SelectValidator, например:

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

Это также исправит ваш ярлык, который не будет отображаться красным, когда пользователь нажимает кнопку "Отправить" без выделения.

...