Как установить значение по умолчанию в поле выбора материала UI в React?

Вам необходимо указать правильное значение MenuItem в состоянии, которое будет сопоставлено при рендеринге.

Вот рабочие коды и ящик: По умолчанию Select Value Material-UI

Поскольку React представил Реагирующие хуки, вам просто нужно передать значение по умолчанию в React.useState () как React.useState (10).

export default function CustomizedSelects() {
  const classes = useStyles();
  const [age, setAge] = React.useState(10);// <--------------(Like this).
  const handleChangeEvent = event => {
    setAge(event.target.value);
  };
  return (
    <form className = {classes.root} autoComplete = "off">
      <FormControl className = {classes.margin}>
        <Select
          value = {age}
          className = {classes.inner}
          onChange = {handleChangeEvent}
          input = {<BootstrapInput name = "currency" id = "currency-customized-select" />}
        >
          <MenuItem value = {10}>Ten</MenuItem>
          <MenuItem value = {20}>Twenty</MenuItem>
          <MenuItem value = {30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </form>
  );
}

Вы можете просто передать displayEmpty в select

<Select
    id = "demo-simple-select-outlined"
    displayEmpty
    value = {select}
    onChange = {handleChangeEvent}
>

и определите элемент меню как

<MenuItem value = ""><Put any default Value which you want to show></MenuItem>

У меня была аналогичная проблема. В моем случае я применил функцию непосредственно к onChange, поэтому у меня было что-то вроде этого:

export default function CustomizedSelects() {
const classes = useStyles();
const [age, setAge] = React.useState(10);

return (
  <form className = {classes.root} autoComplete = "off">
    <FormControl className = {classes.margin}>
      <Select
        value = {age}
        className = {classes.inner}
        onChange = {(event) => setAge(event.target.value)}
        input = {<BootstrapInput name = "currency" id = "currency-customized-select" />}
    >
      <MenuItem value = {10}>Ten</MenuItem>
      <MenuItem value = {20}>Twenty</MenuItem>
      <MenuItem value = {30}>Thirty</MenuItem>
    </Select>
  </FormControl>
</form>

); }

У меня также была отдельная кнопка для очистки значения выбора (или выбора пустого значения по умолчанию). Все работало, значение выбора было установлено правильно, за исключением того, что компонент «Выбор» не возвращался к своей форме по умолчанию - когда значение не выбрано. Я исправил проблему, переместив onChange в отдельную функцию handleChangeEvent, как в примере кода, который представляет @ B4BIPIN.

Я не эксперт в React и все еще учусь, и это был хороший урок. Надеюсь, это поможет ;-)

Просто используйте атрибут значение по умолчанию select. Вы можете обратиться к Документация API выбора материала для пользовательского интерфейса, чтобы узнать больше.

import React from 'react';
import {useState} from 'react';

import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';

const Selector = () => {
    const [Value, setValue] = useState("1");    //    "1" is the default value in this scenario. Replace it with the default value that suits your needs.
    const handleValueChange = event => {
        setValue(event.target.value);
    }

    return(
        <FormControl>
            <InputLabel id = "Input label">Select</InputLabel>
                <Select
                    labelId= "Input label"
                    id= "Select"
                    value= {Value}
                    defaultValue= {Value}
                    onChange= {handleValueChange}
                >
                    <MenuItem value = "1">Item1</MenuItem>
                    <MenuItem value = "2">Item2</MenuItem>
                    <MenuItem value = "3">Item3</MenuItem>
                </Select>
        </FormControl>
    )
};

export default Selector;

Если вы посмотрите на Select Api of Material UI здесь, вы легко сможете это сделать.

1. Как объяснялось выше, вам необходимо передать значение по умолчанию в переменной состояния:

const [age, setAge] = React.useState(10);// <--------------(Like this).

2. Установите для displayEmpty значение true:

If true, a value is displayed even if no items are selected. In order to display a meaningful value, a function should be passed to the renderValue prop which returns the value to be displayed when no items are selected. You can only use it when the native prop is false (default).

<Select 
  displayEmpty
/>