ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีการสร้าง pop-up เพื่อ drag and drop multi image upload บน phpbb
โดย Ittichai_chupol ส 08 ธ.ค. 2018 4:30 pm บอร์ด Programming - PHP
0
25
ส 08 ธ.ค. 2018 4:30 pm โดย Ittichai_chupol
วิธีติดตั้งโปรแกรม Foxit Reader บนระบบปฏิบัติการ Ubuntu 16.04 LTS
โดย tatiya ส 08 ธ.ค. 2018 11:11 am บอร์ด Linux - Web Server
0
17
ส 08 ธ.ค. 2018 11:11 am โดย tatiya
อยากหมดหนี้ฟังทางนี้ ขอโชค ขอลาภกับพระเจ้าตากสิน
โดย Anonymous ศ 07 ธ.ค. 2018 4:40 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
27
ศ 07 ธ.ค. 2018 4:40 pm โดย บุคคลทั่วไป
Extension คืออะไร
โดย จันนุสรณ์ ดีแก่ ศ 07 ธ.ค. 2018 2:58 pm บอร์ด phpBB 3.1 Extension Review
0
22
ศ 07 ธ.ค. 2018 2:58 pm โดย จันนุสรณ์ ดีแก่
วิธีตั้งกระทู้ในเว็บบอร์ด phpBB โพสข้อความ รูปภาพ อัพโหลด ใช้ BBcode
โดย จันนุสรณ์ ดีแก่ ศ 07 ธ.ค. 2018 2:53 pm บอร์ด phpBB user Guide Knowledge
0
35
ศ 07 ธ.ค. 2018 2:53 pm โดย จันนุสรณ์ ดีแก่
Q - Event phpbb ที่แสดงผลตำแหน่ง หัวข้อกระทู้
โดย Ittichai_chupol ศ 07 ธ.ค. 2018 10:43 am บอร์ด Programming - PHP
3
22
ศ 07 ธ.ค. 2018 11:18 am โดย mindphp
ว่าด้วยเรื่องเว็บไซต์
โดย จันนุสรณ์ ดีแก่ ศ 07 ธ.ค. 2018 10:27 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
ศ 07 ธ.ค. 2018 10:27 am โดย จันนุสรณ์ ดีแก่
ราศีใด ระวังไฟไหม้บ้าน มีวิญญาณตามติด
โดย Anonymous พฤ 06 ธ.ค. 2018 8:41 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
28
พฤ 06 ธ.ค. 2018 8:41 pm โดย บุคคลทั่วไป
การส่งข้อความ และการเปิดอ่านข้อความ
โดย จันนุสรณ์ ดีแก่ พฤ 06 ธ.ค. 2018 2:27 pm บอร์ด phpBB user Guide Knowledge
0
28
พฤ 06 ธ.ค. 2018 2:27 pm โดย จันนุสรณ์ ดีแก่
HOW TO ออกจากเกมส์
โดย จันนุสรณ์ ดีแก่ พฤ 06 ธ.ค. 2018 11:32 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
พฤ 06 ธ.ค. 2018 11:32 am โดย จันนุสรณ์ ดีแก่
Q - ตรวจสอบ ไฟล์รูปภาพในกระทู้ phpbb
โดย Ittichai_chupol พฤ 06 ธ.ค. 2018 11:04 am บอร์ด Programming - PHP
1
26
พฤ 06 ธ.ค. 2018 5:06 pm โดย mindphp
สอบถามเกี่ยวกับการตรวจสอบขนาดของ File หลังจากเพิ่มฟอร์มหน่อยครับ
โดย tomsmile05 พฤ 06 ธ.ค. 2018 10:40 am บอร์ด Programming - PHP
1
27
พฤ 06 ธ.ค. 2018 11:19 am โดย tsukasaz
สาเหตุที่นอนไม่หลับ เป็นเพราะแบบนี้หรือเปล่า เช็คก่อนเกิดอันตราย!
โดย gotoblack พฤ 06 ธ.ค. 2018 8:44 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
21
พฤ 06 ธ.ค. 2018 8:44 am โดย gotoblack
ฟังก์ชั่นอีเมลล์ใช้ไม่ได้บน Joomla 4 alpha 3 มีวิธีแก้อย่างไรบ้างค่ะ
โดย pprn พ 05 ธ.ค. 2018 4:32 pm บอร์ด Joomla Development
0
26
พ 05 ธ.ค. 2018 4:32 pm โดย pprn
เช็คดวงราศีเกิด ประจำเดือนธันวาคม 2561
โดย Anonymous อ 04 ธ.ค. 2018 8:34 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
61
อ 04 ธ.ค. 2018 8:34 pm โดย บุคคลทั่วไป
การใช้งาน PM ถ้าคนอ่านยังไม่ได้อ่าน คนส่งสามารถแก้ไขได้
โดย จันนุสรณ์ ดีแก่ อ 04 ธ.ค. 2018 7:21 pm บอร์ด phpBB user Guide Knowledge
0
35
อ 04 ธ.ค. 2018 7:21 pm โดย จันนุสรณ์ ดีแก่
การเพิ่มเสียง ลบเสียงรบกวนออก camtasia
โดย จันนุสรณ์ ดีแก่ อ 04 ธ.ค. 2018 4:49 pm บอร์ด Graphic design
0
42
อ 04 ธ.ค. 2018 4:49 pm โดย จันนุสรณ์ ดีแก่
อัพเกรด Joomla เวอร์ชัน 3.9.1 แล้ว Error
โดย Parichat อ 04 ธ.ค. 2018 4:17 pm บอร์ด Joomla Development
1
55
อ 04 ธ.ค. 2018 4:18 pm โดย Parichat
การหา Element ของปุ่ม create ในหน้า purchase
โดย Aussadawut อ 04 ธ.ค. 2018 1:27 pm บอร์ด Python Knowledge
0
51
อ 04 ธ.ค. 2018 1:27 pm โดย Aussadawut
เมื่อทำงานไว
โดย จันนุสรณ์ ดีแก่ อ 04 ธ.ค. 2018 1:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
42
อ 04 ธ.ค. 2018 1:25 pm โดย จันนุสรณ์ ดีแก่