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

IT技术 reactjs material-ui multi-select
2022-07-08 08:40:55

我正在使用带有来自 Material 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>
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: "&#8203;" }} />)}

    • 这会导致将零宽度空间呈现为“选定值”。这可以确保高度不会塌陷（如果您只返回空字符串，就会发生这种情况），同时仍然允许显示标签。
其它你可能感兴趣的问题
上一篇如何在输入字段reactjs中设置输入字母数字值格式？ 下一篇如何在 React 中测试组件内部的内部方法？