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

Question

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

When the option selected does not occupy the entire field, I would like the size of the field to reduce.如果选择的选项比字段可以容纳的长，我希望字段大小增加以显示整个选项

如何在 Material UI 中实现？

Answer 1

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

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

哪里

const DEFAULT_INPUT_WIDTH = 90;

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

此外，为字体大小

创建一个const

const FONT_SIZE = 9;

autocomplete 获取的 Props 获取 TextField 的宽度值。在样式属性中设置字段的宽度。

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

处理 select 更改的任何函数都将包含以下代码

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 中解释相同。

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

How to automatically resize AutoComplete field in Material UI?

autocomplete

reactjs

material-ui