35

我正在使用来自 material-ui 的选择框

我想在默认情况下显示“选择值”选项，但之后用户无法选择此选项。

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

现在预期的输出应该是下拉应该显示“请选择值”，但目前它显示这个 在此处输入图像描述

4

8 回答 8

18

您需要MenuItem在状态中提供正确的值以在渲染时匹配。

这是工作代码和框：默认选择值 Material-UI

于 2018-09-05T10:54:47.283 回答
13

由于 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>
  );
}
于 2019-06-16T08:48:50.120 回答
11

You can just pass the displayEmpty into select

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

and define the menuItem like

<MenuItem value=""><Put any default Value which you want to show></MenuItem>
于 2020-08-15T11:31:18.427 回答
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>;

于 2020-04-12T00:22:51.853 回答
1

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

  1. 如上所述，您需要在状态变量中传递默认值：
const [age, setAge] = React.useState(10);// <--------------(Like this).
  1. 将 displayEmpty 设置为 true：

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

<Select 
  displayEmpty
/>
于 2021-07-16T13:54:10.057 回答
0

I had a similar issue. In my case, I applied a function directly to onChange so I had something like this:

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>

); }

I also had a separate button to clear select value (or select the default empty value). All was working, the select value was set correctly, except the Select component did not animate to its default form - when no value is selected. I fixed the problem by moving onChange to a handleChange separate function as it is in the code example @B4BIPIN is presenting.

I am not an expert in React and still learning and this was a good lesson. I hope this helps ;-)

于 2021-02-26T11:51:43.593 回答
0 
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>

    );

}
于 2021-08-17T00:31:44.980 回答
0

只需使用 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;
于 2021-06-18T09:27:59.060 回答