@Material ui 自动完成是否可以像在 renderOption 中一样在 getOptionLabel 中显示自定义标签？

Question

我要求在 Automplete 的每个选项中显示项目总数。虽然我能够在展开的项目中显示，但当一个项目被选中时我无法显示。请参考图像和代码，并建议我如何在选定状态下实现相同的效果，如 renderOption。

 getOptionLabel={option =>
                    `${option.listName} (${
                      option.contacts ? option.contacts.length : 0
                    })`
                  }
                  renderOption={option => (
                    <>
                      <div
                        style={{
                          display: 'flex',
                          width: '160px',
                          overflow: 'hidden',
                          justifyContent: 'space-between'
                        }}
                      >
                        <div style={{ width: '160px', overflow: 'hidden' }}>
                          {option.listName}
                        </div>

                        <div className={classes.listCount}>
                          {option.contacts
                            ? option.contacts.length
                            : contactLists.length}
                        </div>
                      </div>
                    </>
                  )}

Answer 1

有 renderInput 属性可以自定义组件的输出。在其中你可以 return 一个 TextField 其中有一个 label 属性.

要自定义标签，您基本上需要给它一个 className。为此，分配给 TextField 一个 InputLabelProps 属性接受标签道具的对象 InputLabelProps={{ className: "autocompleteLabel" }}

示例：

<Autocomplete
       ...
        renderInput={(params) => {
          return (
            <TextField
              {...params}
              label={"choose " + resource}
              InputLabelProps={{ className: "autocompleteLabel" }}
              InputProps={{
                ...params.InputProps,
              }}
            />
          );
        }}
      />

现在，如果您检查自动完成组件，您会发现分配给标签的 class

现在标签已分配 class，您可以正常使用 css

@Material ui 自动完成是否可以像在 renderOption 中一样在 getOptionLabel 中显示自定义标签？

@Material ui Autocomplete is it possible to show a custom label in getOptionLabel just like in renderOption?

reactjs

autocomplete

material-ui