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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
รูปแบบการทำงานของ NAT มีอะไรบ้าง
โดย Patcharanan.0399 ศ 20 เม.ย. 2018 5:14 pm บอร์ด Share Knowledge
0
5
ศ 20 เม.ย. 2018 5:14 pm โดย Patcharanan.0399
ส่วนที่ไม่เข้าใจในบทความ Module MD Client History
โดย alisa93 ศ 20 เม.ย. 2018 4:56 pm บอร์ด Mobile Programming - Android, iOS, Window Phone
2
8
ศ 20 เม.ย. 2018 5:56 pm โดย alisa93
Loopback คืออะไร
โดย Patcharanan.0399 ศ 20 เม.ย. 2018 4:21 pm บอร์ด Share Knowledge
0
6
ศ 20 เม.ย. 2018 4:21 pm โดย Patcharanan.0399
สอบถามเรื่อง SQL การ SELECT id
โดย AePongsak ศ 20 เม.ย. 2018 4:21 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
5
15
ศ 20 เม.ย. 2018 5:05 pm โดย AePongsak
Q - ติดตั้งโมดูลแล้วไฟล์ภาษาหาย
โดย Parichat ศ 20 เม.ย. 2018 3:52 pm บอร์ด Joomla Development
2
12
ศ 20 เม.ย. 2018 4:20 pm โดย Parichat
Q - ทำ Drop Down ในหน้าผู้ดูแลระบบของโมดูล
โดย Parichat ศ 20 เม.ย. 2018 1:22 pm บอร์ด Joomla Development
6
28
ศ 20 เม.ย. 2018 6:59 pm โดย Parichat
ผมสงใสทำไมรีโมทแอร์ ทำไมถึงต้องอยุ่ข้างประตู
โดย nuattawoot ศ 20 เม.ย. 2018 12:58 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
37
ศ 20 เม.ย. 2018 9:47 am โดย tsukasaz
Normal Form ของ Normalization มีอะไรบ้าง
โดย Patcharanan.0399 พฤ 19 เม.ย. 2018 6:37 pm บอร์ด Share Knowledge
0
6
พฤ 19 เม.ย. 2018 6:37 pm โดย Patcharanan.0399
Q - import ฐานข้อมูลมาแต่ Error
โดย Parichat พฤ 19 เม.ย. 2018 5:55 pm บอร์ด SQL - Database
2
24
พฤ 19 เม.ย. 2018 6:43 pm โดย Parichat
ทำไมต้องมี IPv6 ....?
โดย Patcharanan.0399 พฤ 19 เม.ย. 2018 3:04 pm บอร์ด Share Knowledge
0
16
พฤ 19 เม.ย. 2018 3:04 pm โดย Patcharanan.0399
ต้องการใส่เสียงลงใน application
โดย Oley Rujisak พฤ 19 เม.ย. 2018 1:12 pm บอร์ด Mobile Application Developing- Android, iOS
0
10
พฤ 19 เม.ย. 2018 1:12 pm โดย Oley Rujisak
มาแล้ว Joomla 3.8.7 อัพเดทล่าสุด แก้ไข Bug ต่างๆ และปรับปรุงระบบให้ดีขึ้น
โดย tsukasaz พฤ 19 เม.ย. 2018 11:09 am บอร์ด PHP News
0
14
พฤ 19 เม.ย. 2018 11:09 am โดย tsukasaz
3-way Handshake (ทรีเวย์ แฮนเชค)คืออะไร
โดย Patcharanan.0399 พ 18 เม.ย. 2018 6:04 pm บอร์ด Share Knowledge
0
16
พ 18 เม.ย. 2018 6:04 pm โดย Patcharanan.0399
TCP (ทีซีพี) และ UDP (ยูดีพี) แตกต่างกันอย่างไร
โดย Patcharanan.0399 พ 18 เม.ย. 2018 5:46 pm บอร์ด Share Knowledge
1
23
พฤ 19 เม.ย. 2018 3:50 am โดย mindphp
ICMP Protocol (ไอซีเอ็มพี โปรโตคอล) คืออะไร
โดย Patcharanan.0399 พ 18 เม.ย. 2018 5:24 pm บอร์ด Share Knowledge
0
11
พ 18 เม.ย. 2018 5:24 pm โดย Patcharanan.0399
ไม่สามารถติดตั้ง selenium v.2.9.1 ได้
โดย Patcharanan.0399 พ 18 เม.ย. 2018 4:35 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
7
44
พฤ 19 เม.ย. 2018 3:45 am โดย mindphp
หาคนสอน Dreamweaver php+mySQL ด่วน!
โดย dettana พ 18 เม.ย. 2018 2:04 pm บอร์ด Programming - PHP
0
17
พ 18 เม.ย. 2018 2:04 pm โดย dettana
ODBMS (โอดีบีเอ็มเอส) และ RDBMS (อาดีบีเอ็มเอส) แตกต่างกันอย่างไร
โดย Patcharanan.0399 อ 17 เม.ย. 2018 5:11 pm บอร์ด Share Knowledge
0
22
อ 17 เม.ย. 2018 5:11 pm โดย Patcharanan.0399
วิธีการปรับปรุงงบการเงินที่ถูกต้อง
โดย thatsawan อ 17 เม.ย. 2018 4:24 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
20
อ 17 เม.ย. 2018 4:24 pm โดย thatsawan
trial balance เดือน 12 (31 ธันวาคม) กับ ตอนปิดงบปี ต้องเหมือนกันหรือตรงกันไหม
โดย thatsawan อ 17 เม.ย. 2018 3:59 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
13
อ 17 เม.ย. 2018 3:59 pm โดย thatsawan