อินพุตแบบไม่ควบคุมด้วย useRef

ยินดีต้อนรับ

แบบถูกควบคุมและแบบไม่ถูกควบคุม

// Controlled
<input value={name} onChange={e => setName(e.target.value)} />

// Uncontrolled
const nameRef = useRef();
<input ref={nameRef} defaultValue="" />

การอ่านค่าเมื่อส่งแบบฟอร์ม

function Form() {
  const nameRef = useRef();
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(nameRef.current.value);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

defaultValue เทียบกับ value

<input ref={nameRef} defaultValue="Initial text" />

เมื่อใดควรใช้ช่องกรอกข้อมูลแบบไม่ถูกควบคุม

การรีเซ็ตช่องกรอกข้อมูลแบบไม่ถูกควบคุม

// Reset imperatively
nameRef.current.value = '';

// Or remount
setFormKey(k => k + 1);
<input key={formKey} ref={nameRef} />

รีเฟอเรนซ์หลายตัวสำหรับช่องกรอกข้อมูลหลายช่อง

const emailRef = useRef();
const passwordRef = useRef();

<input ref={emailRef} type="email" />
<input ref={passwordRef} type="password" />

การโฟกัสเมื่อเมานต์

const inputRef = useRef();
useEffect(() => {
  inputRef.current?.focus();
}, []);
<input ref={inputRef} />

ช่องกรอกข้อมูลแบบไม่ถูกควบคุมและการตรวจสอบความถูกต้อง

ข้อแลกเปลี่ยนของ useRef

ตรวจสอบความเข้าใจอย่างรวดเร็ว

สรุปทบทวน

ถัดไป