javascript - 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 === '')

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

Answer 1

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

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

可以引用这个Code Sandbox示例

<小时/>

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