reactjs - Material Ui - 在 "select"模式下向 TextField 添加所需属性

标签 reactjs validation material-ui

我正在尝试在选择模式下设置“必需”文本字段。 我尝试像此代码片段中那样添加 required 属性,但是如果我没有选择任何内容,这不会阻止提交事件。尽管它在标签中添加了“*”。

请检查此sandbox

<TextField
  id="select-currency"
  select
  label="Select"
  value={this.state.currency}
  onChange={this.handleChange("currency")}
  required
>
  {currencies.map(option => (
    <MenuItem key={option.value} value={option.value}>
      {option.label}
    </MenuItem>
  ))}
</TextField>

更新:(确实澄清) 我说的是html5验证。在沙箱示例中,有“选择”和“文本”字段,根据需要设置文本字段将阻止提交事件并显示 native html5 错误,指出“此字段是必需的”,如果字段是“选择”,则不是这种情况。

最佳答案

Material Ui 提供了另一个组件 Native Select处理这种 native 验证。

请检查此示例

Edit Material demo

关于reactjs - Material Ui - 在 "select"模式下向 TextField 添加所需属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52132544/

相关文章:

javascript - ReactJs:如何获取引用来自其父项的组件的引用

reactjs - 我无法在 typescript 中使用动态键名设置状态

validation - EmailAddressAttribute 如何工作?

javascript - Joi - not.exist()?

html - Material UI DropDownMenu 占据 100% 高度

javascript - 为什么调用 .bind(this) 时函数中 this 未定义?

javascript - React - 未设置组件状态

node.js - Express 验证器 - 如何允许可选字段

reactjs - 我无法将下一个 js 链接添加到 mui appbar

reactjs - 覆盖 Material UI MuiInput