почему моя метка окна выбора отображается внутри поля 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>
);
}
Похоже, пакет Материал UI FormValidator просто принимает свойство label
. Вы должны удалить
<InputLabel htmlFor = "age-simple">
Age
</InputLabel>
и добавьте label
и InputLabelProps
со свойствами shrink: true (как описано в разделе ограничений Здесь) для вашего SelectValidator
, например:
<SelectValidator
required
label = "Age"
InputLabelProps = {{ shrink: true }}
value = ""
name = "name"
.......
Это также исправит вашу метку, не отображающуюся красным, когда пользователь нажимает "Отправить" без выбора.