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/

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

1 个答案: