除非有选择的选项,否则我想显示类似红色的错误。有没有办法做到这一点。
要在Material UI中设置必填的Select字段,您可以执行以下操作:
class SimpleSelect extends React.PureComponent { state = { selected: null, hasError: false } handleChange(value) { this.setState({ selected: value }); } handleClick() { this.setState(state => ({ hasError: !state.selected })); } 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> ); } }