如何在 material-UI select 框中设置默认值？

Question

我正在使用 material-ui Select box

我想默认显示 "select the value" 选项 selected 但之后用户无法 select 此选项。

<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

正如 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 3

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

您只需将 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 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 值（或 select 默认空值）。一切正常，select 值设置正确，除了 Select 组件没有动画为其默认形式 - 当没有值被 selected 时。我通过将 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:

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

Answer 8

const ackList = [
  {
    key: 0,
    value: "Not acknowledged",
  },
  {
    key: 1,
    value: "Acknowledged",
  },
];

function AcknowledgementList() {
  const [acknowledge, setAcknowledge] = useState(ackList[1]);

  const handleChange2 = (event) => {
    setAcknowledge(ackList[event.target.value]);
  };
  return (
            <TextField
              select
              fullWidth
              value={acknowledge.key}
              onChange={handleChange2}
              variant="outlined"
            >
              {ackList.map((ack) => (
                <MenuItem key={ack.key} value={ack.key}>
                  {ack.value}
                </MenuItem>
              ))}
            </TextField>

    );

}

如何在 material-UI select 框中设置默认值？

How to set default value in material-UI select box in react?

reactjs

material-design

material-ui

react-redux

jss

更新