如何在 Material UI (React JS) 中根据需要制作“选择”组件
Posted
技术标签:
【中文标题】如何在 Material UI (React JS) 中根据需要制作“选择”组件【英文标题】:How to make a 'Select' component as required in Material UI (React JS) 【发布时间】:2019-01-07 09:12:41 【问题描述】:除非有选择的选项,否则我想用红色显示错误。 有没有办法做到这一点。
【问题讨论】:
有很多方法可以做到这一点。首先显示您的代码示例。那么我们可以为您提供帮助。 @ObsidianAge 你能告诉我一个方法吗 :) 【参考方案1】:要使用 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>
);
CodeSandBox 上的工作演示
【讨论】:
【参考方案2】:Material UI 有其他类型的 Select(native) 也可以使用纯 HTML required 属性来标记元素。
<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>
附: https://material-ui.com/demos/selects/#native-select
【讨论】:
它也适用于非原生 Select,因为它被放置在 FormControl 标签中。 当我将“必需”放在 FormControl 中时,我得到“*”,所以它看起来是必需的。但是当我提交表单时,它实际上并没有像 TextField 那样强制用户填写该字段。 添加<form onSubmit=this.handleSubmit></form>
将解决问题。 @alsky以上是关于如何在 Material UI (React JS) 中根据需要制作“选择”组件的主要内容,如果未能解决你的问题,请参考以下文章
React&Material UI-如何根据路线删除导航按钮/链接?
React、Jest 和 Material-UI:如何测试以模态或弹出框呈现的内容