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

Question

我正在尝试在 select 模式下制作 "required" TextField。我尝试像此代码段中那样添加 required 道具，但如果我没有 select 任何东西，这不会阻止提交事件。尽管它在标签中添加了“*”。

请检查这个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 验证。在沙箱示例中有 Select 和文本字段，根据需要设置文本字段将阻止提交事件并显示本机 html5 错误说 "this field is required"，如果字段是 "select".

Answer 1

控制表格行为不是现场责任。它是父子关系和自上而下的数据传递。

表单（组件）向字段组件提供组件的当前值（有效性信息、更改处理程序）。字段根据道具使用样式和元素显示内容（需要时 *，错误边框等），但决定 value/validity/submiting 的是表单的角色。

Answer 2

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

请检查这个例子

Answer 3

它最近在 material ui 中实施。如果您将 @material-ui/core 升级到版本 4.11.0 它将工作 https://github.com/mui-org/material-ui/issues/20402

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

Material Ui - Add required attribute to a TextField in "select" mode

html-validation

reactjs

material-ui