如何在Material UI中自动调整“自动完成”字段的大小？

Question

我想使用Material UI实现“自动完成”字段，其中该字段的大小将根据所选选项进行调整。

当选择的选项不占据整个字段中，我想字段的大小，以减少。而且，如果所选选项的长度超过字段可以容纳的范围，我希望字段大小增加以显示整个选项

该如何在Material UI中实现？

Answer 1

可以通过创建State变量来更改输入宽度。

const [inputWidth, setInputWidth] = useState(DEFAULT_INPUT_WIDTH);

其中

const DEFAULT_INPUT_WIDTH = 90;

可以设置为任何默认值。例如：90

此外，为字体大小

创建一个const。

const FONT_SIZE = 9;

通过自动完成功能获取的道具的宽度为TextField的值。在样式属性中设置字段的宽度。

let autocompleteInputProps = {
      label: 'ABC',
      style: { width: `${inputWidth}px`},  
    };

处理选择更改的哪个函数将包含以下代码

const handleSelectChange = (value) => {
    if (value.code.toString().length !== 1){
      setInputWidth(DEFAULT_INPUT_WIDTH + value.toString().length * FONT_SIZE)
    } else {
      setInputWidth(DEFAULT_INPUT_WIDTH)
    }
  };

This在TextField中也有相同的解释。