Question

我正在使用材料ui v4中的带复选框的多选功能。提供的默认设置显示“ 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}
- 这可以防止标签在选择焦点对准时缩小和向上移动。
renderValue={() => (<span dangerouslySetInnerHTML={{ __html: "" }} />)}
- 这将导致零宽度的空间呈现为“选定值”。这样可以确保高度不会折叠（如果您只返回空字符串，则会发生这种情况），同时仍允许显示标签。

如何永久显示输入标签/占位符/标签？

1 个答案: