ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

การสร้างฟอร์ม HTML ใน React

     Element ของฟอร์ม HTML จะทำงานแตกต่างจาก Element DOM อื่นๆ ใน React เพราะว่า Elements ของฟอร์มมีความเป็นธรรมชาติมากกว่า

     Exanple ฟอร์มในรูปแบบ HTML ธรรมดา :

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

     จากข้างบน ฟอร์มนี้มีรูปแบบ HTML การทำงานของมันคือ จะแสดงข้อมูลบนหน้าเว็บเมื่อเราส่งแบบฟอร์ม แต่เราจะใช้ฟังก์ชัน JavaScript มาจัดการกับการส่งแบบฟอร์มและเข้าถึงข้อมูลที่เรากรอกลงในแบบฟอร์ม

 

Component ที่ใช้งานอยู่

     ใน HTML ฟอร์ม Element จะใช้ <input>, <textarea> และ <select> ฟอร์มเหล่านี้ จะมีการอัพเดทค่า เมื่อเรากำหนดค่าให้มัน โดยใช้ setState() เราสามารถรวมทั้งสองไว้ได้โดยการทำให้ State เป็น "single source of truth" จากนั้น Component ที่สร้างฟอร์มจะควบคุมสิ่งที่เกิดขึ้นในแบบฟอร์ม Element แบบป้อนข้อมูลที่มีค่าถูกควบคุมโดย React ในลักษณะนี้เรียกว่า "component ควบคุม"

     Exanple  :

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>
    );
  }
}

     จากตัวอย่าง เมื่อ Value ถูก set ค่าโดยฟอร์ม Element ค่าที่แดสงออกมาจะเป็น this.state.value เนื่องจากคำสั่ง handChange จะทำงานเมื่อเราพิมพ์ข้อมูลต่างๆ เพื่ออัพเดทสถานะ ค่าที่แสดงออกมาจะเป็นค่าตามที่เราได้พิมพ์ออกมา

 

Textarea tag

     ใน HTML <textarea> จะกำหนดให้ใส่เป็นข้อความ เช่น :

<textarea>
  Hello there, this is some text in a text area
</textarea>

     ส่วนใน React <textarea> จะใช้ค่าเป็น value แทน วิธีนี้ฟอร์มที่ใช้ <textarea> สามารถเขียนได้เหมือน ฟอร์มที่ใช้อินพุตแบบบรรทัดเดียว :

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Please write an essay about your favorite DOM element.'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('An essay was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <textarea value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

     สังเกตว่า this.state.value ถูกเตรียมให้ใช้งานใน Constructor เพื่อให้ข้อความเริ่มต้นด้วยข้อความบางส่วนในไฟล์

 

Select tag

     ใน HTML <select> จะสร้าง Drop-down ดังตัวอย่าง :

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

     จากตัวอย่าง Coconut ได้ถูกเลือกให้เป็นค่าเริ่มต้น เพราะว่าเราใส่คำสั่ง selected ไว้ใน option เพราะว่า React ใช้แอตทริบิวต์ value ในแท็ก select root ในส่วนควบคุมเนื่องจากเราจำเป็นต้องอัปเดตในครั้งเดียว

     Example :

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite La Croix flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

     แท็กทั้งหมดที่กล่าวมานี้ <input type = "text"> <textarea> และ <select> ทั้งหมดทำงานคล้าย ๆ กัน แท็กทั้งหมดนี้ยอมรับค่าที่เราใช้บน Component

 

 

ข้อมูลอ้างอิง : https://reactjs.org

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ตัวอย่างการสร้าง Service odoo13 บน Ubuntu 16.04
โดย mindphp ส 12 ต.ค. 2019 1:35 am บอร์ด Linux - Web Server
0
43
ส 12 ต.ค. 2019 1:35 am โดย mindphp
MJupgrade Joomla 1.5.26 > 3.9 ขึ้น Error: Could not connect to MySQL server.
โดย เห็ด อินโมชั่น ศ 11 ต.ค. 2019 3:30 pm บอร์ด Joomla Development
3
47
ศ 11 ต.ค. 2019 5:14 pm โดย เห็ด อินโมชั่น
MJupgrade Joomla 1.5.26 > 3.9 ขึ้น Error: Could not connect to MySQL server.
โดย เห็ด อินโมชั่น ศ 11 ต.ค. 2019 4:59 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
7
769
ส 12 ต.ค. 2019 3:35 am โดย mindphp
อยากทราบวิธีนับจำนวน id ที่ซ้ำกัน ครับ
โดย jamepiyawat ศ 11 ต.ค. 2019 5:06 pm บอร์ด SQL - Database
3
69
ศ 11 ต.ค. 2019 6:20 pm โดย jamepiyawat
การ Search ค้นหาข้อมูลของบอร์ด phpBB
โดย aninthana พฤ 10 ต.ค. 2019 6:46 pm บอร์ด Wordpress user Guide Knowledge
0
67
พฤ 10 ต.ค. 2019 6:46 pm โดย aninthana
ทำป้าย PopUp ด้วย Modal ใน Bootstrap เวอร์ชั่น 4
โดย jamepiyawat พฤ 10 ต.ค. 2019 5:20 pm บอร์ด Booststap Knowledge
0
65
พฤ 10 ต.ค. 2019 5:20 pm โดย jamepiyawat
ทำยังไงถึงจะไม่ให้แสดงเลข ID หน้า Alias ได้ครับ
โดย jamepiyawat พฤ 10 ต.ค. 2019 4:03 pm บอร์ด Joomla Development
1
34
พฤ 10 ต.ค. 2019 6:02 pm โดย tsukasaz
ทำไมผมถึงดึงข้อมูลชื่อหมวดหมู่ออกมาแสดงหน้าตั้งค่า module ไม่ได้ครับ
โดย jamepiyawat พฤ 10 ต.ค. 2019 3:47 pm บอร์ด Joomla Development
2
42
พฤ 10 ต.ค. 2019 6:36 pm โดย jamepiyawat
ตัวเลขด้านหน้าข้อความที่เราตั้ง Alias คืออะไรครับ
โดย jamepiyawat พฤ 10 ต.ค. 2019 11:36 am บอร์ด Joomla Development
5
67
พฤ 10 ต.ค. 2019 2:46 pm โดย mindphp
แก้ปัญหา Error Ignoring file '50unattended-upgrades.ucf-old' in directory บน Ubunto 16.04 ติดตั้ง apt-get
โดย mindphp พฤ 10 ต.ค. 2019 5:42 am บอร์ด Linux - Web Server
0
46
พฤ 10 ต.ค. 2019 5:42 am โดย mindphp
Q - สอบถามวิธี Upload file html ไปยัง web service โดยใช้คำสั่ง curl ใน PHP
โดย birdkritsna พ 09 ต.ค. 2019 3:42 pm บอร์ด Programming - PHP
6
107
พฤ 10 ต.ค. 2019 2:07 pm โดย birdkritsna
10 เเหล่งช๊อปปิ้งใรเชียงรายที่ต้องไปให้ได้
โดย nemo413 พ 09 ต.ค. 2019 1:04 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
62
พ 09 ต.ค. 2019 1:04 pm โดย nemo413
สอบถามครับ อยากได้ url ของลิงค์ ให้มาแสดงในช่อง ต้องทำยังไงครับ
โดย chatee supasand พ 09 ต.ค. 2019 12:22 pm บอร์ด Programming - C/C++ & java & Python
6
102
พ 09 ต.ค. 2019 1:41 pm โดย chatee supasand
Microsoft Word สามารถ แปลงไฟล์เสียง ให้เป็นข้อความได้แล้วใน Office 365
โดย chatee supasand พ 09 ต.ค. 2019 11:32 am บอร์ด Microsoft Office Knowledge & line & Etc
0
31
พ 09 ต.ค. 2019 11:32 am โดย chatee supasand
สอบถามการเขียนโค้ด กรอกข้อมูลหน้าแรก แล้วให้กดส่ง ไปยังหน้าที่สองครับผม
โดย Jakkrit Saengngoenon อ 08 ต.ค. 2019 1:40 pm บอร์ด Programming - PHP
1
57
อ 08 ต.ค. 2019 1:50 pm โดย mindphp
ขอสอบถามเกี่ยวกับ license ของ ฟอนต์ ไทยสารบรรณ (TH Sarabun PSK)
โดย Anonymous อ 08 ต.ค. 2019 8:03 am บอร์ด Programming - PHP
0
45
อ 08 ต.ค. 2019 8:03 am โดย บุคคลทั่วไป
การส่ง parameters ไปกับการ Request แบบ Get ด้วย curl
โดย mindphp จ 07 ต.ค. 2019 12:12 am บอร์ด PHP Knowledge
0
117
จ 07 ต.ค. 2019 12:12 am โดย mindphp
Q สอบถามลองเขียน php webservice ด้วย nuSoap แล้วขึ้น Error ครับ
โดย birdkritsna ส 05 ต.ค. 2019 5:37 pm บอร์ด Programming - PHP
10
210
พฤ 10 ต.ค. 2019 10:29 am โดย birdkritsna
ทำยังไงถึงปุ่มจะอยู่ระดับเดียวกันครับ
โดย jamepiyawat ส 05 ต.ค. 2019 3:08 pm บอร์ด HTML CSS
6
151
ส 05 ต.ค. 2019 4:48 pm โดย jamepiyawat
Microsoft Surface Neo อีกหนึ่งผลิตภันฑ์แท็บเล็ตหน้าจอคู่ของ Microsoft
โดย chatee supasand ส 05 ต.ค. 2019 2:33 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
74
ส 05 ต.ค. 2019 2:33 pm โดย chatee supasand