如何在反应的材料-UI选择框中设置默认值？

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: ""
}

现在预期的输出应该是下拉应该显示“请选择值”，但目前它显示这个

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

您可以将displayEmpty 传递给选择

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

并像这样定义 menuItem

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

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

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

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

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

1. 将 displayEmpty 设置为 true：

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

<Select 
  displayEmpty
/>

Answer 6

我遇到了类似的问题。就我而言，我将一个函数直接应用于 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 方面的专家，但我仍在学习，这是一个很好的教训。我希望这会有所帮助;-)

Answer 7

只需使用 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 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>

    );

}