在 Material-UI TextField 中，当输入模糊时，如何防止标签落在装饰物后面？

Question

这是我的 TextField 组件：

<TextField fullWidth: true,
              classes,
              helperText: errorText,
              FormHelperTextProps: getInputProps({
                error
              }),
              InputProps: getInputProps({
                error,
                endAdornment: error ? <WarningIcon /> : '',
                startAdornment:
                  selectedItems.length > 0 && Array.isArray(selectedItems)
                    ? selectedItems.map((item, index) => {
                        const itemIndex = seedJson
                          .map(items => {
                            return items.label.toLowerCase();
                          })
                          .indexOf(item);
                        if (itemIndex > -1 && index <= 14) {
                          return (
                            <ChipWrapper
                              key={item + index}
                              tabIndex={-1}
                              label={<ChipContent value={item} index={index} />}
                              deleteIcon={<CloseIconWrapper />}
                              onDelete={this.handleDelete(item)}
                            />
                          );
                        }
                        return (
                          <InvalidChipWrapper
                            key={item + index}
                            tabIndex={-1}
                            label={<ChipContent value={item} index={index} />}
                            deleteIcon={<CloseIconWrapper />}
                            onDelete={this.handleDelete(item)}
                          />
                        );
                      })
                    : undefined,
                onKeyDown: this.handleKeyDown,
                onChange: this.handleInputChange,
                id: 'integration-downshift-multiple'
              })
            })}
/>

每当我输入文本时，我都有一个函数，它接受该值并将其放入数组中，然后我通过数组映射以生成如上所示的装饰。这将返回：

但是，当输入失去焦点时，标签就会像这样落在装饰后面：

我尝试过的：

我尝试在输入中添加“”，但这只会使标签永久缩小。我还尝试检查 adornment.length 和 input.length 的输入，但是标签仅在有文本时才响应，而不是 onFocus。有什么想法吗？

Answer 1

TextField 包含一个名为 InputLabelProps 的道具，它接受一个对象。您可以将shrink: true 传递到该对象中，标签将缩小并保持缩小状态。

<TextField
  label="Wooooo it works"
  InputLabelProps={{
     shrink: true
  }}
/>

查看示例：https://codesandbox.io/s/6xr6jrzv7r

文档：https://material-ui.com/api/text-field/