วิธีสร้างแบบฟอร์มใน ReactJS

สวัสดีทุกคน,

เป็นบล็อกแรกของฉันในสาขาวิศวกรรมซอฟต์แวร์ วันนี้ผมจะมาพูดถึงว่าเราจะสร้างแบบฟอร์มใน react js ได้อย่างไร

เอาล่ะกู…..

React ใช้แบบฟอร์มเพื่อให้ผู้ใช้สามารถโต้ตอบกับหน้าเว็บได้ เช่นเดียวกับใน HTML

function MyForm() {
  return (
    <form>
      <label>Enter your name:
        <input type="text" />
      </label>
    </form>
  )
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

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

ตอนนี้คุณจะต้องคิดว่าการจัดการแบบฟอร์มใน React จะเป็นอย่างไร การจัดการแบบฟอร์มเป็นเรื่องเกี่ยวกับวิธีที่คุณจัดการข้อมูลเมื่อมีการเปลี่ยนแปลงค่าหรือได้รับการส่ง โดยปกติใน HTML ข้อมูลแบบฟอร์มมักจะถูกจัดการโดย DOM แต่ใน React โดยทั่วไปข้อมูลในแบบฟอร์มจะถูกจัดการโดยส่วนประกอบต่างๆ นั่นคือเมื่อส่วนประกอบจัดการข้อมูล ข้อมูลทั้งหมดจะถูกจัดเก็บไว้ในสถานะส่วนประกอบ สามารถควบคุมการเปลี่ยนแปลงได้โดยการเพิ่มตัวจัดการเหตุการณ์ในแอตทริบิวต์ onChange

เราสามารถใช้ useState Hook เพื่อติดตามค่าอินพุตแต่ละรายการ และจัดเตรียม 'แหล่งความจริงแหล่งเดียว' สำหรับแอปพลิเคชันทั้งหมด

นี่คือตัวอย่างโค้ดขั้นต่ำ:

import { useState } from "react";
import ReactDOM from 'react-dom';

function MyForm() {
  const [name, setName] = useState("");

  return (
    <form>
      <label>Enter your name:
        <input
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

ตอนนี้คุณอาจกำลังคิดว่าคุณจะจัดการส่วนที่ส่งแบบฟอร์มได้อย่างไร คุณสามารถดำเนินการนี้ได้โดยเพิ่มตัวจัดการเหตุการณ์ในแอตทริบิวต์ onSubmit สำหรับ <form>

import { useState } from "react";
import ReactDOM from 'react-dom';

function MyForm() {
  const [name, setName] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`The name you entered was: ${name}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
        <input 
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <input type="submit" />
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

ตอนนี้เรามาดูกันว่าคุณสามารถสร้างช่องป้อนข้อมูลหลายช่องในแบบฟอร์มได้อย่างไร

ซึ่งสามารถทำได้โดยการควบคุมค่าของช่องป้อนข้อมูลมากกว่าหนึ่งช่องโดยการเพิ่มแอตทริบิวต์ name ให้กับแต่ละองค์ประกอบ

ตอนนี้ในการเข้าถึงฟิลด์ในตัวจัดการเหตุการณ์ให้ใช้ไวยากรณ์ event.target.name และ event.target.value และหากต้องการอัปเดตสถานะ ให้ใช้วงเล็บเหลี่ยมล้อมรอบชื่อคุณสมบัติ

import { useState } from "react";
import ReactDOM from "react-dom";

function MyForm() {
  const [inputs, setInputs] = useState({});

  const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInputs(values => ({...values, [name]: value}))
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(inputs);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
      <input 
        type="text" 
        name="username" 
        value={inputs.username || ""} 
        onChange={handleChange}
      />
      </label>
      <label>Enter your age:
        <input 
          type="number" 
          name="age" 
          value={inputs.age || ""} 
          onChange={handleChange}
        />
        </label>
        <input type="submit" />
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

สุดท้ายนี้ เรามาพูดคุยกันว่าเราจะสร้างกล่องเลือก รายการแบบเลื่อนลงใน React ได้อย่างไร

รายการแบบเลื่อนลงหรือกล่องเลือกใน React ก็แตกต่างจาก HTML เล็กน้อยเช่นกัน ใน HTML ค่าที่เลือกในรายการแบบเลื่อนลงถูกกำหนดด้วยแอตทริบิวต์ที่เลือก

<select>
  <option value="Ford">Ford</option>
  <option value="Volvo" selected>Volvo</option>
  <option value="Fiat">Fiat</option>
</select>

แต่ใน React ค่าที่เลือกจะถูกกำหนดด้วยแอตทริบิวต์ value บนแท็ก select

นี่คือตัวอย่างโค้ด:

import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
  const [myCar, setMyCar] = useState("Volvo");
  const handleChange = (event) => {
    setMyCar(event.target.value)
  }
  return (
    <form>
      <select value={myCar} onChange={handleChange}>
        <option value="Ford">Ford</option>
        <option value="Volvo">Volvo</option>
        <option value="Fiat">Fiat</option>
      </select>
    </form>
  )
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

ขอบคุณสำหรับการอ่าน ฉันแน่ใจว่าตอนนี้คุณสามารถได้รับความรู้จากบทความนี้แล้ว

พบกันเร็ว ๆ นี้กับบทความใหม่

‹h1>ขอให้สนุกกับการเขียนโค้ด! ‹/h1›

วิธีสร้างแบบฟอร์มใน ReactJS

คำถามในหัวข้อ