当以编程方式设置 TextField 的值时，Material UI TextField 标签不会向上移动

Question

我有一个TextField连接到的元素react-hook-form。当我专注于该输入时，我会打开一个国家/地区列表，以便我可以选择一个国家/地区，通过 中的setValue函数将其电话代码填充到该字段中react-hook-form。

一切正常，国家/地区代码确实出现在字段中，但手动输入文本时通常向上移动的标签不会向上移动。

这是它的样子

Answer 1

当我在reactjs项目中以编程方式更新文本字段值时，我也遇到了同样的问题，对我有用的是使用javascript三元运算符，如下面的代码所示：

const [name,setName]=useState('')

somefunction = () => setName('abc')

        <TextField
          required
          variant="outlined"
          label="...some label..."
          // value={name} instead of this line write below line
          **value={name ? name : ''}**
          onchange={...somefunction...}
        />

Answer 2

添加这个

InputLabelProps={{ shrink: true }}

到您的 TextField 属性。