MUI，聚焦文本输入

Question

我希望TextField的defaultValue显示"用户名"；页面呈现。onFocus，我想"用户名"；以消失，从而用户可以舒适地打字。我尝试了以下方法：

function Login() {
const [usernameDefaultValue, setUsernameDefaultValue] = useState("Username");
return (    <div>
<TextField
required
id="standard-required"
label="Required"
defaultValue={usernameDefaultValue}
onFocus={() => setUsernameDefaultValue('')}
variant="standard"
/>
)}

但是当前用户必须双击defaultValue("用户名"(以清除其实际用户名的字段。

Answer 1

使用此库时，不需要由state控制临时值。这就是label道具的作用。将标签设置为"；用户名"；并单独设置状态，初始值为''

function Login() {
const [userName, setUserName] = useState('')
const handleChange = (e) => {
const name = e.target.value
return setUserName(name)
}
return (
<TextField
id="standard-required"
label="Username"
onChange={handleChange}
required 
value={userName}
variant="standard"
/>
)
}