การทำงานกับอินพุตใน React

การทำงานกับอินพุตใน React เกิดขึ้นโดยใช้ สเตต สำหรับแต่ละอินพุตจะมีการกำหนดสเตตของตัวเอง ซึ่งมี value ของอินพุตอยู่ภายใน

เรามาดูตัวอย่างกัน สมมติว่าเรามี อินพุต:

jsxfunction App() {
  return <div>
    <input />
  </div>;
}

สมมติว่าเรามีสเตตด้วย:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  return <div>
    <input />
  </div>;
}

ลองผูกสเตตของเราเข้ากับแอตทริบิวต์ value ของอินพุต:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  return <div>
    <input value={value} />
  </div>;
}

ในกรณีนี้ ผลลัพธ์ที่ได้คือ เมื่อสเตตเปลี่ยนแปลง ข้อความในอินพุตก็จะเปลี่ยนไปตามแบบ reactive

อย่างไรก็ตาม สิ่งนี้ให้ผลข้างเคียงที่น่าสนใจ: ตอนนี้เมื่อรันโค้ดในเบราว์เซอร์ ไม่อาจ เปลี่ยนข้อความในอินพุตได้! ทำไม: เพราะ เมื่อป้อนข้อความลงในอินพุต สเตต value ไม่ได้เปลี่ยนแปลง ดังนั้นข้อความ ในอินพุตก็ไม่ควรเปลี่ยนแปลง

ลองทำดูเอง คัดลอกโค้ดของฉันและรัน บนเครื่องของคุณ ลองเปลี่ยนข้อความในอินพุต - คุณจะทำอะไรไม่ได้เลย เปิดคอนโซล เบราว์เซอร์ - คุณจะเห็นคำเตือน จาก React คำเตือนนี้ระบุให้เราเห็น ว่าเราผูกสเตตเข้ากับอินพุต แต่ด้วยเหตุนี้ จึงล็อกอินพุตไว้

มาทำให้สามารถป้อนข้อความ ลงในอินพุตของเราได้ สำหรับสิ่งนี้จำเป็นต้องทำให้ เมื่อมีการป้อนข้อมูล สเตตของเรา จะเปลี่ยนเป็นค่าปัจจุบันของอินพุต

เริ่มแรก สำหรับสิ่งนี้จำเป็นต้องติดตั้งบนอินพุต เหตุการณ์ onChange:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

เหตุการณ์นี้ใน React มีพฤติกรรมต่างออกไป เมื่อเทียบกับ JS ล้วนๆ ใน React มัน ทำงาน ทันทีเมื่ออินพุตเปลี่ยนแปลง นั่นคือ เมื่อป้อนหรือลบอักขระ

ทีนี้มาลองเพิ่มตัวจัดการเหตุการณ์ของเรา:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange() {
    
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

ในตัวจัดการนี้ เราต้องอ่านข้อความปัจจุบัน ของอินพุตและตั้งค่าให้เป็นสเตตโดยใช้ ฟังก์ชัน setValue

ปัญหาคือ this ของฟังก์ชันนี้ จะไม่ชี้ไปที่อินพุตของเรา - นี่คือ ลักษณะเฉพาะของ React เพื่อให้ได้องค์ประกอบ ที่เกิดเหตุการณ์ขึ้น เราจำเป็นต้อง ใช้ event.target:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange(event) {
    console.log(event.target); // ลิงก์ไปยังองค์ประกอบ DOM ของอินพุต
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

ลองแสดงข้อความปัจจุบัน ของอินพุตโดยใช้ event.target:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange(event) {
    console.log(event.target.value); // ข้อความปัจจุบันของอินพุต
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

และตอนนี้ลองบันทึกข้อความของอินพุตลงในสเตตของเรา:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange(event) {
    setValue(event.target.value);
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

ตอนนี้เราสามารถป้อนข้อความลงในอินพุตได้แล้ว เมื่อ นั้น สเตต value จะมี ข้อความปัจจุบันของอินพุตอยู่เสมอ

เราสามารถตรวจสอบสิ่งนี้ได้ง่ายๆ ลองแสดงเนื้อหาของ ข้อความของเราลงในย่อหน้า ในกรณีนี้เมื่อ ป้อนข้อความลงในอินพุต ข้อความที่ป้อนจะ ปรากฏในย่อหน้าอัตโนมัติ:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  function handleChange(event) {
    setValue(event.target.value);
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
    <p>ข้อความ: {value}</p>
  </div>;
}

เราสามารถเขียนใหม่เป็นแบบกระชับมากขึ้น ด้วยฟังก์ชันลูกศรแบบไม่ระบุชื่อ:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  return <div>
    <input value={value} onChange={event => setValue(event.target.value)} />
    <p>ข้อความ: {value}</p>
  </div>;
}

ดังนั้น สำหรับการทำงานของอินพุตใดๆ เราจำเป็น ต้องมีสิ่งต่อไปนี้: สร้างสเตตสำหรับ อินพุตนี้, ผูกสเตตเข้ากับแอตทริบิวต์ value ของอินพุต, ติดตั้งเหตุการณ์ onChange บนอินพุต, ในตัวจัดการเหตุการณ์ ให้เปลี่ยนสเตตของอินพุต เป็นข้อความของมัน

จำเป็นต้องดำเนินการเหล่านี้กับทุก อินพุต นั่นคือ หากคุณมีสองอินพุต, คุณจะมีสองสเตตและสองฟังก์ชันตัวจัดการ เหตุการณ์ onChange