Comment créer un composant «Select» comme requis dans l'interface utilisateur du matériau (React JS)
Je veux afficher comme une erreur de couleur rouge à moins qu'il n'y ait une option sélectionnée. Y a-t-il un moyen de le faire.
Pour définir un champ de sélection obligatoire avec l'interface utilisateur du matériau, vous pouvez effectuer:
class SimpleSelect extends React.Component {
state = {
selected: null,
hasError: false
};
handleChange(value) {
this.setState({ selected: value });
}
handleClick() {
this.setState({ hasError: false });
if (!this.state.selected) {
this.setState({ hasError: true });
}
}
render() {
const { classes } = this.props;
const { selected, hasError } = this.state;
return (
<form className={classes.root} autoComplete="off">
<FormControl className={classes.formControl} error={hasError}>
<InputLabel htmlFor="name">Name</InputLabel>
<Select
name="name"
value={selected}
onChange={event => this.handleChange(event.target.value)}
input={<Input id="name" />}
>
<MenuItem value="hai">Hai</MenuItem>
<MenuItem value="olivier">Olivier</MenuItem>
<MenuItem value="kevin">Kevin</MenuItem>
</Select>
{hasError && <FormHelperText>This is required!</FormHelperText>}
</FormControl>
<button type="button" onClick={() => this.handleClick()}>
Submit
</button>
</form>
);
}
}
Démonstration de travail sur CodeSandBox
Le matériau ui a d'autres types de Select (natif) où vous pouvez simplement utiliser l'attribut HTML requis pour marquer l'élément comme requis.
<FormControl className={classes.formControl} required >
<InputLabel htmlFor="name">Name</InputLabel>
<Select
native
required
value={this.state.name}
onChange={this.handleChange}
inputProps={{
name: 'name',
id: 'name'
}}
>
<option value="" />
<option value={"lala"}>lala</option>
<option value={"lolo"}>lolo</option>
</Select>
</FormControl>