如何在 Material UI (React JS) 中根据需要制作“选择”组件答案

【问题标题】：How to make a 'Select' component as required in Material UI (React JS)如何在 Material UI (React JS) 中根据需要制作“选择”组件
【发布时间】：2019-01-07 09:12:41
【问题描述】：

除非有选择的选项，否则我想用红色显示错误。有没有办法做到这一点。

【问题讨论】：

有很多方法可以做到这一点。首先显示您的代码示例。那么我们可以为您提供帮助。
@ObsidianAge 你能告诉我一个方法吗 :)

标签： javascript css reactjs frontend material-ui

【解决方案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