Question

我正在使用Material-ui中的Select box

默认情况下，我要显示“选择值”选项，但是此用户无法选择此选项。

<FormControl required className={classes.formControl}>
  <InputLabel htmlFor="circle">Circle</InputLabel>
    <Select
      value={circle}
      onChange={event => handleInput(event, "circle")}
      input={<Input name="circle" id="circle" />}
    >
      <MenuItem value="" disabled>
        <em>select the value</em>
      </MenuItem>

      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  <FormHelperText>Some important helper text</FormHelperText>
</FormControl>

沙箱上的当前代码：https://codesandbox.io/s/xoylmlj1qp

我想这样写：https://jsfiddle.net/wc1mxdto/

更新

我将状态20更改为圆圈中的空白字符串

form: {
  searchValue: "",
  circle: '',
  searchCriteria: ""
}

现在预期的输出应该是下拉列表，应该显示“ please select value”，但是目前显示

Answer 1

您需要提供正确的MenuItem值，以便在渲染时进行匹配。

这是工作代码和框：Default Select Value Material-UI

Answer 2

您只需将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>

Answer 3

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

Answer 4

<FormControl variant="outlined" className={classes.formControl}>
  <InputLabel id="uni">UNI</InputLabel>
  <Select
    key={value}
    defaultValue={value}
    labelId="uni"
    id="uni"
    name="uni"
    onBlur={onChange}
    label="uni"
  >
    {unis.map((u, i) => (
      <MenuItem value={u.value} key={i}>
        {u.label}
      </MenuItem>
    ))}
  </Select>
</FormControl>;

Answer 5

我遇到了类似的问题。就我而言，我将一个函数直接应用于 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>

); }

我还有一个单独的按钮来清除选择值（或选择默认的空值）。一切正常，选择值设置正确，除了 Select 组件没有为其默认形式设置动画 - 当没有选择任何值时。我通过将 onChange 移到 handleChange 单独函数来解决该问题，就像在@B4BIPIN 所呈现的代码示例中一样。

我不是 React 专家，仍在学习中，这是一个很好的教训。我希望这会有所帮助 ;-)

Answer 6

只需使用 select 的 defaultValue 属性。您可以参考Material UI Select API Docs了解更多信息。

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;

Answer 7

如果您查看 Material UI here 的 Select Api，您可以轻松完成。

如上所述，您需要在状态变量中传递默认值：

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

将 displayEmpty 设置为 true：

<块引用>

如果为 true，即使没有选择任何项目，也会显示一个值。为了显示有意义的值，应将函数传递给 renderValue 属性，该属性返回在未选择任何项目时要显示的值。您只能在 native prop 为 false（默认）时使用它。

<Select 
  displayEmpty
/>

如何在react的Material-UI选择框中设置默认值？

更新

7 个答案: