Material Design React 多选占位符

Question

我正在尝试使我的 React 组件的行为类似于多选 here 中占位符的示例。

但是，在对代码进行了多次变体之后，我似乎无法像在他们的代码中那样将占位符值作为默认值放在那里。

这是我的代码：

const units = [
    'box',
    'pieces',
    'ounces'
];

export default function MultipleSelect() {
  const [values, setValues] = React.useState({
    units: ''
  });

  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

  return (
    <div className={classes.root}>
      <FormControl className={clsx(classes.formControl, classes.noLabel)}>
                <Select
                    value={values.units}
                    onChange={handleChange('units')}
                    autoWidth
                    renderValue={selected => {
                        console.log(selected);
                        if (!selected) return "Placeholder";
                        else return selected;
                    }}
                >
                    {/* TODO: Add default value from the array */}
                    {units.map((unit) => (
                        <MenuItem key={unit} value={unit}>{unit}</MenuItem>
                    ))}
                </Select>
            </FormControl>
    </div>
  )
}

如果我放了

<MenuItem disabled value="">
  <em>Placeholder</em>
</MenuItem>

在 map() 函数之前，它将“占位符”显示为菜单列表的禁用选项，但这不是我需要的。

我也尝试过设置如下条件：

if (selected.length === 0)
if (selected === '')

看起来，当我单击“选择”列表时，我可以通过控制台记录 selected 值，但默认情况下不会触发。

Answer 1

您需要将默认状态单位设置为占位符：

  const [values, setValues] = React.useState({
    units: 'Placeholder'
  });

你可以参考这个Code Sandbox例子

---

更新： 上面的答案实际上不适用于多选。
要查看适用于多选的代码，请查看Code Sandbox