- สรุปย่อเกี่ยวกับ ReactJS
- แบบฟอร์ม (Forms) และอินพุต (Inputs) ReactJS: พื้นฐาน
2.1 ส่วนประกอบที่ควบคุม (Controlled Components)
2.2 ส่วนประกอบที่ไม่มีการควบคุม (Uncontrolled Components) - การจัดการ Form State ใน React
- การจัดการการส่งแบบฟอร์ม (Form Submission)
- ตรวจสอบการป้อนข้อมูลในแบบฟอร์ม
5.1 ไลบรารีแบบฟอร์ม
5.2 ฟอร์มิก (Formik)
5.3 แบบฟอร์ม Hook
สร้างโดย Facebook เป็นเครื่องมือที่ทรงพลังในโลกของการพัฒนาเว็บและแอปพลิเคชัน หากคุณกระตือรือร้นในการทำเว็บ ReactJS และทำแอพโดยใช้ไลบรารีอเนกประสงค์นี้ การทำความเข้าใจเกี่ยวกับการจัดการแบบฟอร์มและการป้อนข้อมูลเป็นขั้นตอนสำคัญในเส้นทางการเรียนรู้ของคุณ คู่มือนี้จะเจาะลึกความซับซ้อนของการสร้างและจัดการฟอร์มใน ReactJS ทำให้คุณจัดการกับอินพุตของผู้ใช้ได้อย่างราบรื่น
1. สรุปย่อเกี่ยวกับ ReactJS
ReactJS ได้กลายเป็นตัวเลือกสำหรับนักพัฒนาจำนวนมากทั่วโลกเนื่องจากความสามารถในการสร้างอินเทอร์เฟซผู้ใช้ที่รวดเร็ว ปรับขนาดได้ และเรียบง่าย สถาปัตยกรรมแบบคอมโพเนนต์ช่วยให้นักพัฒนาสามารถสร้างชิ้นส่วนของโค้ดที่ใช้ซ้ำได้ ซึ่งจะช่วยเพิ่มประสิทธิภาพ ไม่ว่าคุณจะทำเว็บ ReactJS และทำแอพเต็มรูปแบบ การทำความเข้าใจวิธีจัดการกับแบบฟอร์มและอินพุตเป็นส่วนสำคัญของกระบวนการ
2. แบบฟอร์ม (Forms) และอินพุต (Inputs) ReactJS: พื้นฐาน
ใน HTML แบบดั้งเดิม องค์ประกอบของฟอร์ม เช่น <input>, <textarea>, และ <select> โดยทั่วไปจะรักษาสถานะของตัวเองและอัปเดตตามอินพุตของผู้ใช้ อย่างไรก็ตาม ใน React สถานะที่ไม่แน่นอนนี้มักจะถูกเก็บไว้ในคุณสมบัติสถานะของคอมโพเนนต์ และสามารถอัปเดตได้ผ่าน this.setState(). เราจะเจาะลึกถึงวิธีการที่ React จัดการกับองค์ประกอบของแบบฟอร์มและแนวทางปฏิบัติที่ดีที่สุดที่คุณควรนำมาใช้
2.1 ส่วนประกอบที่ควบคุม (Controlled Components)
ใน React องค์ประกอบรูปแบบเช่น <input>, <textarea> และ<select> โดยปกติจะมีสถานะควบคุมโดยส่วนประกอบ React สิ่งเหล่านี้เรียกว่า “controlled components” ค่าของฟิลด์แบบฟอร์มถูกควบคุมโดยตรงโดยสถานะภายในส่วนประกอบของคุณ
นี่คือตัวอย่างพื้นฐานของส่วนประกอบที่ควบคุมใน React:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);2.2 ส่วนประกอบที่ไม่มีการควบคุม (Uncontrolled Components)
ตรงกันข้ามกับส่วนประกอบที่มีการควบคุม ส่วนประกอบที่ไม่มีการควบคุมจะรักษาสถานะภายในของตนเอง พวกเขาให้ความยืดหยุ่นมากกว่าเล็กน้อยแต่มีความสอดคล้องกันน้อยกว่าในโค้ดของคุณ พวกเขาใช้ ref เพื่อรับค่าแบบฟอร์มจาก DOM แม้ว่าการใช้ส่วนประกอบที่ไม่มีการควบคุมจะไม่เหมือนกัน แต่ก็มีสถานการณ์ที่อาจเป็นประโยชน์
นี่คือตัวอย่างของส่วนประกอบที่ไม่มีการควบคุม:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);3. การจัดการ Form State ใน React
การจัดการสถานะของแบบฟอร์มในแอปพลิเคชัน React เป็นสิ่งสำคัญ วิธีการทั่วไปคือการจัดเก็บ form state ใน local state ของ component และอัพเดททุกการเปลี่ยนแปลงใน input สามารถทำได้โดยใช้ส่วนประกอบควบคุมและ setState ฟังก์ชัน
นี่คือตัวอย่างง่ายๆ ของฟอร์มที่มีอินพุตควบคุมสองอินพุต:
class ReservationForm extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
numberOfGuests: ''
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<label>
Name:
<input
name="name"
type="text"
value={this.state.name}
onChange={this.handleInputChange} />
</label>
<label>
Number of guests:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}ในตัวอย่างนี้ handleInputChange ฟังก์ชันนี้ใช้เพื่ออัปเดตสถานะของช่องฟอร์ม แอตทริบิวต์ name ของแต่ละอินพุตใช้เพื่อระบุสถานะที่จะอัปเดต
4. การจัดการการส่งแบบฟอร์ม (Form Submission)
ใน React องค์ประกอบรูปแบบ HTML จะทำงานแตกต่างจากองค์ประกอบ DOM อื่นๆ เล็กน้อย องค์ประกอบของแบบฟอร์มจะรักษาสถานะภายในไว้ตามธรรมชาติ ใน HTML การส่งแบบฟอร์มมักจะส่งผลให้หน้ารีเฟรช อย่างไรก็ตาม ในแอปพลิเคชัน ReactJS คุณมักจะต้องการให้การส่งแบบฟอร์มได้รับการจัดการโดยฟังก์ชัน JavaScript ที่คุณเขียน หลีกเลี่ยงการรีเฟรชหน้าและควบคุมพฤติกรรมของแบบฟอร์มในการโต้ตอบของผู้ใช้ได้อย่างเต็มที่
ด้านล่างนี้คือตัวอย่างฟอร์มใน React ที่มีตัวจัดการการส่ง:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);ในตัวอย่างนี้ handleSubmit ฟังก์ชันจะป้องกันพฤติกรรมการส่งแบบฟอร์มเริ่มต้นโดยใช้ event.preventDefault() และจัดการการส่งด้วยตนเองแทนด้วยการแจ้งเตือน JavaScript
5. ตรวจสอบการป้อนข้อมูลในแบบฟอร์ม
การตรวจสอบแบบฟอร์มเป็นคุณลักษณะที่สำคัญในการพัฒนาทั้งเว็บและแอป ทำให้มั่นใจได้ว่าข้อมูลที่รวบรวมได้ตรงกับข้อกำหนดที่ตั้งไว้ ใน React คุณสามารถจัดการการตรวจสอบระหว่างการเปลี่ยนแปลงอินพุตหรือขณะส่งแบบฟอร์ม
ต่อไปนี้คือตัวอย่างการตรวจสอบความถูกต้องของช่องป้อนข้อมูลที่ต้องใช้รูปแบบอีเมลระหว่างการเปลี่ยนแปลง:
class EmailForm extends React.Component {
constructor(props) {
super(props);
this.state = {
email: '',
error: ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const email = event.target.value;
this.setState({ email });
if (email.includes('@')) {
this.setState({ error: '' });
} else {
this.setState({ error: 'Please enter a valid email address.' });
}
}
render() {
return (
<form>
<label>
Email:
<input type="text" value={this.state.email} onChange={this.handleChange} />
</label>
{this.state.error && <p>{this.state.error}</p>}
</form>
);
}
}
ReactDOM.render(
<EmailForm />,
document.getElementById('root')
);ในตัวอย่างข้างต้น handleChange ฟังก์ชันจะตรวจสอบว่าค่าของช่องใส่อีเมลมีอักขระ “@” หรือไม่ หากไม่เป็นเช่นนั้น ระบบจะอัปเดตสถานะข้อผิดพลาดด้วยข้อความแสดงข้อผิดพลาดที่เกี่ยวข้อง ข้อความแสดงข้อผิดพลาดจะแสดงด้านล่างช่องป้อนข้อมูลเมื่อใดก็ตามที่สถานะข้อผิดพลาดไม่ว่างเปล่า
5.1 ไลบรารีแบบฟอร์ม
ในขณะที่ตัวอย่างที่ให้ไว้ข้างต้นให้ความเข้าใจพื้นฐานของการจัดการแบบฟอร์มใน React การจัดการแบบฟอร์มที่ซับซ้อนด้วยสถานะที่ซ้อนกันอาจกลายเป็นเรื่องละเอียดและซับซ้อน สำหรับแอปพลิเคชันขนาดใหญ่หรือการจัดการแบบฟอร์มที่ซับซ้อน มีไลบรารีของบุคคลที่สาม เช่น Formik และ React Hook Form ไลบรารีเหล่านี้มีคุณสมบัติขั้นสูง เช่น การตรวจสอบแบบฟอร์ม การจัดการข้อผิดพลาด และการส่งแบบฟอร์ม ด้วย API ที่ง่ายขึ้น
5.2 ฟอร์มิก (Formik)
Formik เป็นห้องสมุดขนาดเล็กที่ช่วยคุณใน 3 ส่วนที่น่ารำคาญที่สุด: การรับค่าเข้าและออกจากสถานะของฟอร์ม การตรวจสอบความถูกต้องและข้อความแสดงข้อผิดพลาด และการจัดการการส่งแบบฟอร์ม
นี่คือตัวอย่างแบบฟอร์มที่ใช้ Formik:
import React from 'react';
import { useFormik } from 'formik';
const SignupForm = () => {
const formik = useFormik({
initialValues: {
email: '',
},
onSubmit: values => {
alert(JSON.stringify(values, null, 2));
},
});
return (
<form onSubmit={formik.handleSubmit}>
<label htmlFor="email">Email Address</label>
<input
id="email"
name="email"
type="email"
onChange={formik.handleChange}
value={formik.values.email}
/>
<button type="submit">Submit</button>
</form>
);
};
export default SignupForm;5.3 แบบฟอร์ม Hook
React Hook Form เป็นไลบรารีที่ค่อนข้างใหม่ที่พยายามมอบประสบการณ์การตรวจสอบความถูกต้องของฟอร์มที่เหมาะสมที่สุดโดยมีการแสดงผลซ้ำน้อยที่สุด มันใช้ประโยชน์จากพลังของ React hooks เพื่อบันทึกค่าของแบบฟอร์มโดยไม่ต้องล้อมแต่ละฟิลด์อินพุตด้วยส่วนประกอบลำดับที่สูงกว่า เช่นเดียวกับกรณีของ Formik
ต่อไปนี้คือวิธีสร้างฟอร์มโดยใช้ React Hook Form:
import React from 'react';
import { useForm } from 'react-hook-form';
function App() {
const { register, handleSubmit } = useForm();
const onSubmit = data => alert(JSON.stringify(data));
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input name="firstName" ref={register} placeholder="First name" />
<input name="lastName" ref={register} placeholder="Last name" />
<input type="submit" />
</form>
);
}
export default App;ในขณะที่เราทำเว็บ ReactJS และทำแอพการจัดการแบบฟอร์มเป็นทักษะสำคัญที่นักพัฒนาทุกคนต้องเข้าใจ แม้ว่าเรามักจะใช้ไลบรารีของบุคคลที่สามสำหรับสิ่งนี้ แต่การทำความเข้าใจว่า React จัดการกับรูปแบบนอกกรอบนั้นเป็นรากฐานที่สำคัญอย่างไร สอนเราเกี่ยวกับแนวคิดของส่วนประกอบที่มีการควบคุมและไม่มีการควบคุม การจัดการการเปลี่ยนแปลง การจัดการสถานะ และการส่งแบบฟอร์ม
การทำความเข้าใจหลักการเหล่านี้ยังทำให้ง่ายต่อการเปลี่ยนไปใช้ไลบรารีเช่น Formik หรือ React Hook Form หากจำเป็น ตั้งแต่การตรวจสอบอินพุตของผู้ใช้ไปจนถึงการจัดการสถานะของฟอร์มที่ซับซ้อน ชุดทักษะของคุณจะมีความกลมมากขึ้นเมื่อคุณคุ้นเคยกับฟอร์มใน React
เมื่อพัฒนาแอปพลิเคชัน สิ่งสำคัญคือต้องจำไว้ว่าแบบฟอร์มมักทำหน้าที่เป็นอินเทอร์เฟซหลักระหว่างผู้ใช้และระบบ ด้วยเหตุนี้ การสร้างประสบการณ์ผู้ใช้ที่ดีด้วยฟอร์มจึงไม่ใช่แค่การสร้างสิ่งที่ดีเท่านั้น แต่ยังเป็นหัวใจสำคัญของประสบการณ์ของผู้ใช้ในแอปพลิเคชันของคุณด้วย
แบบฟอร์มเป็นมากกว่าวิธีการเก็บข้อมูลการป้อนข้อมูลของผู้ใช้ เป็นองค์ประกอบที่สำคัญของการโต้ตอบกับผู้ใช้และการไหลของแอปพลิเคชัน ด้วยความเข้าใจที่ถูกต้องเกี่ยวกับรูปแบบใน React คุณจะสามารถทำเว็บ ReactJS และทำแอพที่ใช้งานง่ายและเป็นมิตรกับผู้ใช้ได้เป็นอย่างดี
React มีการพัฒนาอย่างต่อเนื่อง และรูปแบบและไลบรารีต่างๆ ที่เกี่ยวข้องกับการจัดการฟอร์มก็เช่นกัน อย่าลืมจับตาดูชุมชน React เพื่อติดตามแนวทางล่าสุดและแนวทางปฏิบัติที่ดีที่สุด ความสามารถในการจัดการแบบฟอร์มอย่างมีประสิทธิภาพเป็นขั้นตอนสำคัญในการทำเว็บ ReactJS และทำแอพช่วยเพิ่มขีดความสามารถของคุณในการสร้างอินเทอร์เฟซแบบไดนามิก โต้ตอบได้ และเป็นมิตรกับผู้ใช้
ไม่ว่าคุณจะเพิ่งเริ่มต้นเส้นทางในการทำเว็บ ReactJS และทำแอพหรือคุณกำลังมองหาการขัดเกลาทักษะของคุณ การเจาะลึกเกี่ยวกับการจัดการแบบฟอร์มจะเป็นประโยชน์อย่างไม่ต้องสงสัย เขียนโค้ดต่อไป เรียนรู้ต่อไป