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'
  });

您可以参考此CodeSandbox示例

材料设计反应多个选择占位符

1 个答案: