javascript - 在 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 的 prop，它接受一个对象。您可以将 shr​​ink: true 传递到该对象中，标签将收缩并保持收缩状态。

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

参见示例:https://codesandbox.io/s/6xr6jrzv7r

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