web-dev-qa-db-ja.com

マテリアルUI（React JS）で必要に応じて「選択」コンポーネントを作成する方法

選択したオプションがない限り、エラーのように赤色で表示したい。それを行う方法はありますか。

javascriptcssreactjsfrontendmaterial-ui
9
Kusal Kithmal

マテリアルUIで必須の選択フィールドを設定するには、次を実行できます。

class SimpleSelect extends React.Component {
  state = {
    selected: null,
    hasError: false
  };

  handleChange(value) {
    this.setState({ selected: value });
  }

  handleClick() {
    this.setState({ hasError: false });
    if (!this.state.selected) {
      this.setState({ hasError: true });
    }
  }

  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の作業デモ

Edit soanswer51605798

9
Jee Mok

マテリアルuiには、他のタイプのSelect（native）もあり、プレーンHTML必須属性を使用して、要素を必須としてマークできます。

<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

2
Novice_JS