如何永久显示输入标签/占位符/标签? [英] How to show an inputlabel/placeholder/label permanently?

问题描述

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

I'm using the multi-select with checkboxes from material ui v4. The provided default settings display an array of 'SELECTED' values. renderValue={selected => selected.join(', ')}. However, I would like to remove this function and only display a permanent label. It seems that the display value is being tied to the value of the component itself. Does anybody knows how to work around this?

  <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>

推荐答案

您是不是要表明所选值是什么?

Are you saying that you don't want any indication of what the selected values are?

如果是的话，下面是这样做的一种方法:

If so, below is one way of doing that:

      <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收缩= {false}

• 这可以防止标签在选择聚焦时缩小和向上移动.

renderValue = {()=>(< spanangerlySetInnerHTML = {{__html:&#8203;"}}/>)}

• 这将导致零宽度的空间呈现为选定值".这样可以确保高度不会折叠(如果您只返回空字符串，则会发生这种情况)，同时仍允许显示标签.

这篇关于如何永久显示输入标签/占位符/标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！