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