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

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

когда я пытался проверить свое поле выбора с помощью плагина response-material-ui-form-validator, моя метка попала внутри select bx, почему вот мой код плагин:https://www.npmjs.com/package/react-material-ui-form-validatorhttps://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>
  );
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
109
1

Ответы 1

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

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

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

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

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

Другие вопросы по теме