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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การสไลด์โชว์สินค้าได้หลายรูปแบบ ด้วย Module MZC Slider ii ใน MooZiiCart
โดย bolue อ 27 ต.ค. 2020 5:58 pm บอร์ด MindPHP News & Feedback
0
2
อ 27 ต.ค. 2020 5:58 pm โดย bolue
การแก้ไขข้อความ หรือเพิ่มรายละเอียดข้อความ แบบตรวจสอบได้ ผ่านทาง word online
โดย Bellamy อ 27 ต.ค. 2020 5:28 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
3
อ 27 ต.ค. 2020 5:28 pm โดย Bellamy
ขั้นตอนทำงาน System Analyst and Design
โดย Bellamy จ 26 ต.ค. 2020 6:51 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
21
จ 26 ต.ค. 2020 6:51 pm โดย Bellamy
แนะนำแหล่งท่องเที่ยวและการเดินทางในกทม
โดย Bellamy จ 26 ต.ค. 2020 4:53 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
24
จ 26 ต.ค. 2020 6:50 pm โดย Bellamy
Content Marketing คือ - ในปัจจุบันสำคัญอย่างไร?
โดย ploypola จ 26 ต.ค. 2020 12:07 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
14
จ 26 ต.ค. 2020 12:07 pm โดย ploypola
วิธีการ Insert , edit ,delete โดยผ่านตัว Model Laravel Framework
โดย makup ส 24 ต.ค. 2020 3:44 pm บอร์ด PHP Knowledge
1
30
ส 24 ต.ค. 2020 3:59 pm โดย makup
ติดปัญหาการค้นหาข้อมูล Listbox ให้เลือกค่าเก่าค้างไว้
โดย makup พฤ 22 ต.ค. 2020 8:05 pm บอร์ด Programming - PHP
10
114
จ 26 ต.ค. 2020 7:15 pm โดย makup
อยากทราบว่า ตรงที่แสดงข้อมูล URL จะให้แสดงเฉพาะ id แค่ตัวเลข ต้องทำอย่างไงครับ
โดย makup พฤ 22 ต.ค. 2020 8:05 pm บอร์ด Programming - PHP
3
40
พฤ 22 ต.ค. 2020 8:16 pm โดย mindphp
วิธีการ Upload file ภาพ ขึ้น Server
โดย makup พฤ 22 ต.ค. 2020 5:41 pm บอร์ด PHP Knowledge
1
47
พฤ 22 ต.ค. 2020 5:54 pm โดย makup
ปัญหา phpBB Error ในหน้า admin vsprintf(): Too few arguments
โดย mindphp พ 21 ต.ค. 2020 5:36 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
0
37
พ 21 ต.ค. 2020 5:36 pm โดย mindphp
สอนเขียนวิธี Upload File Laravel ขึ้น Server
โดย makup พ 21 ต.ค. 2020 3:41 pm บอร์ด PHP Knowledge
2
64
พ 21 ต.ค. 2020 5:25 pm โดย makup
สอบถาม การขึ้นบรรทัดใหม่ ด้วย การนับ len และตัดแบบเต็มคำยังไงคะ
โดย bolue อ 20 ต.ค. 2020 7:22 pm บอร์ด Programming - C/C++ & java & Python
2
59
อ 20 ต.ค. 2020 8:15 pm โดย mindphp
วิธีการทำระบบค้นหา ใน Laravel Framework
โดย makup อ 20 ต.ค. 2020 12:57 pm บอร์ด PHP Knowledge
0
89
อ 20 ต.ค. 2020 12:57 pm โดย makup
เจอปัญหา Publishing failed. You are probably offline. ปัญหาใน Wordpress 5.x
โดย mindphp อ 20 ต.ค. 2020 6:03 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
73
อ 20 ต.ค. 2020 6:30 am โดย mindphp
แสดงสินค้าที่ขายได้ล่าสุด ด้วย Module Latest Sold Products ใน MooZiiCart
โดย bolue จ 19 ต.ค. 2020 6:53 pm บอร์ด MindPHP News & Feedback
1
169
จ 26 ต.ค. 2020 7:38 pm โดย prmindphp
ติดปัญหาเรื่อง การทำปุ่ม ค้นหา ที่มีการเชื่อมความสัมพันธ์ Laravel Framework
โดย makup จ 19 ต.ค. 2020 6:23 pm บอร์ด Programming - PHP
3
205
อ 20 ต.ค. 2020 1:32 pm โดย mindphp
วิธีการกำหนด Routing ใน Laravel Framework
โดย makup จ 19 ต.ค. 2020 7:15 am บอร์ด PHP Knowledge
0
236
จ 19 ต.ค. 2020 7:15 am โดย makup
วิธีแสดงพิกัดบนแผนที่ OpenStreetMap ด้วย Laravel Framework
โดย makup อ 18 ต.ค. 2020 6:21 pm บอร์ด PHP Knowledge
0
146
อ 18 ต.ค. 2020 6:21 pm โดย makup
เจอปัญหา ในฐาน Joomla Out of resources when opening file '/tmp/#sql_7059_0.MAD' (Errcode: 24 "Too many open files")
โดย mindphp อ 18 ต.ค. 2020 5:34 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
143
อ 18 ต.ค. 2020 5:41 pm โดย mindphp
Re: Mysql เช็คerror ฟิลซ้ำ แสดงข้อความ(PHP)
โดย kimmyth ศ 16 ต.ค. 2020 11:26 pm บอร์ด Programming - PHP
1
139
ส 17 ต.ค. 2020 10:02 am โดย mindphp