如何永久显示inputlabel/placeholder/label？

Question

我正在使用 material ui v4 中带有复选框的 multi-select。提供的默认设置显示 'SELECTED' 值的数组。 renderValue={selected => selected.join(', ')}。但是，我想删除这个功能，只显示一个永久标签。显示值似乎与组件本身的值相关联。有人知道如何解决这个问题吗？

  <FormControl className={classes.formControl}>
    <InputLabel htmlFor="select-multiple-checkbox">Tag</InputLabel>
    <Select
      multiple
      value={personName}
      onChange={handleChange}
      input={<Input id="select-multiple-checkbox" />}
      renderValue={selected => selected.join(', ')}
      MenuProps={MenuProps}
    >
      {names.map(name => (
        <MenuItem key={name} value={name}>
          <Checkbox checked={personName.indexOf(name) > -1} />
          <ListItemText primary={name} />
        </MenuItem>
      ))}
    </Select>
  </FormControl>

Answer 1

您是说您不想知道所选值是什么？

如果是这样，下面是一种方法：

      <FormControl className={classes.formControl}>
        <InputLabel shrink={false} htmlFor="select-multiple-checkbox">
          Tag
        </InputLabel>
        <Select
          multiple
          value={personName}
          onChange={handleChange}
          input={<Input id="select-multiple-checkbox" />}
          renderValue={() => (
            <span dangerouslySetInnerHTML={{ __html: "&#8203;" }} />
          )}
          MenuProps={MenuProps}
        >
          {names.map(name => (
            <MenuItem key={name} value={name}>
              <Checkbox checked={personName.indexOf(name) > -1} />
              <ListItemText primary={name} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>

<InputLabel shrink={false}
- 这可以防止标签在 Select 聚焦时收缩和向上移动。
renderValue={() => (<span dangerouslySetInnerHTML={{ __html: "" }} />)}
- 这会导致 zero-width space 呈现为 "selected values"。这确保高度不会折叠（如果您只是 return 空字符串会发生这种情况），同时仍然允许显示标签。

如何永久显示inputlabel/placeholder/label？

How to show an inputlabel/placeholder/label permanently?

reactjs

material-ui

multi-select