Как постоянно отображать метку ввода / заполнитель / метку? - PullRequest
Новая
       27

Как постоянно отображать метку ввода / заполнитель / метку?

1 голос
/ 25 июня 2019

Я использую multi-select с флажками из материала ui v4. Предоставленные настройки по умолчанию отображают массив «ВЫБРАННЫХ» значений. 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 Ответ

1 голос
/ 25 июня 2019

Вы говорите, что не хотите никаких указаний о выбранных значениях?

Если это так, ниже приведен один из способов сделать это: 

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

Edit Select - Only show label

  • <InputLabel shrink={false}

    • Это предотвращает сужение и перемещение этикетки, когда фокус выбран.

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

    • Это приводит к тому, что пространство нулевой ширины отображается как «выбранные значения». Это гарантирует, что высота не сжимается (что происходит, если вы просто возвращаете пустую строку), в то же время позволяя отображать метку.
...