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

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

Вот рабочие коды и ящик: Default Select Value Material-UI

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

export default function CustomizedSelects() {
  const classes = useStyles();
  const [age, setAge] = React.useState(10);// <--------------(Like this).
  const handleChange = event => {
    setAge(event.target.value);
  };
  return (
    <form className={classes.root} autoComplete="off">
      <FormControl className={classes.margin}>
        <Select
          value={age}
          className={classes.inner}
          onChange={handleChange}
          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={handleChange}
>

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

<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 в отдельную функцию handleChange, как в примере кода, который представляет @ B4BIPIN.

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

Просто используйте атрибут defaultValue для 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:

Если true, значение отображается, даже если ни один элемент не выбран. Чтобы отобразить значимое значение, в свойство renderValue необходимо передать функцию, которая возвращает значение, которое будет отображаться, когда ни один элемент не выбран. Вы можете использовать его только в том случае, если для собственного свойства задано значение false (по умолчанию).

<Select 
  displayEmpty
/>