Saltar al contenido

Cómo hacer un componente ‘Seleccionar’ según se requiera en Material UI (React JS)

Solución:

Para configurar un campo de selección obligatorio con la interfaz de usuario de material, puede hacer lo siguiente:

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>
    );
  }
}

Demostración de trabajo en CodeSandBox

Editar soanswer51605798

La interfaz de usuario de material tiene otros tipos de selección (nativa) también donde puede usar el atributo requerido HTML simple para marcar el elemento como requerido.

<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>

PS https://material-ui.com/demos/selects/#native-select

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *