不受控制的 TextField 在每次重新渲染时重置输入引用

Question

我想使用不受控制的 TextField 和默认值。 然后让用户编辑并检查每个输入字符的输入。 如果验证失败，我会尝试设置错误标志，但 useState 会重新渲染整个组件，从而导致将用户的输入重置为默认值

 import { TextField } from '@mui/material';

  const emailAddressInputRef = useRef();
  const [emailError, setEmailError] = useState(false);


  const checkEmail = emailToCheck => {
    if (emailHasError(emailToCheck.trim())) {
      setEmailError(true);
    } else  {
      setEmailError(false);
    }
  };

           

 <TextField
     autoFocus
     label="Email address"
     variant="outlined"
     fullWidth
     error={emailError === true}
     inputRef={emailAddressInputRef}
     defaultValue='[email protected]'
     onKeyUp={e => checkEmail(e.target.value)}
     onBlur={e => checkEmail(e.target.value)}
 />

Answer 1

请在文本字段中使用 value 属性而不是默认值。