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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 14 พฤศจิยน 2561
โดย tatiya พ 14 พ.ย. 2018 9:39 am บอร์ด M065 - ตติยะ นาชัย
0
1
พ 14 พ.ย. 2018 9:39 am โดย tatiya
งานประจำวันที่ 14 พฤศจิกายน 2561
โดย prakon พ 14 พ.ย. 2018 9:35 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
1
พ 14 พ.ย. 2018 9:35 am โดย prakon
อัพโหลดไฟล์ ผ่าน FTP ด้วย Python ง่ายๆ 5 บรรทัดก็ย้ายไฟล์ไปยัง Server ปลายทางได้แล้ว
โดย mindphp พ 14 พ.ย. 2018 9:34 am บอร์ด Python Knowledge
0
6
พ 14 พ.ย. 2018 9:34 am โดย mindphp
งานประจำวันที่ 14 พฤศจิกายน 2561
โดย nice_13 พ 14 พ.ย. 2018 9:31 am บอร์ด M071 - พิชญ์สินี คงจร
0
1
พ 14 พ.ย. 2018 9:31 am โดย nice_13
งานประจำวันที่ 14 พฤษจิกายน 2561
โดย Ittichai_chupol พ 14 พ.ย. 2018 9:21 am บอร์ด M070 - อิทธิชัย ชูผล
0
1
พ 14 พ.ย. 2018 9:21 am โดย Ittichai_chupol
งานประจำวันที่ 14 พฤศจิกายน 2561
โดย tai14 พ 14 พ.ย. 2018 8:09 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
1
พ 14 พ.ย. 2018 8:09 am โดย tai14
งานประจำวันที่ 13 พฤศจิกายน 2561
โดย tai14 พ 14 พ.ย. 2018 8:09 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
1
พ 14 พ.ย. 2018 8:09 am โดย tai14
งานประจำวันที่ 14 พฤศจิกายน 2561
โดย pprn พ 14 พ.ย. 2018 8:08 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
1
พ 14 พ.ย. 2018 8:08 am โดย pprn
รายงานปัญหาที่ต้องแก้ไขใน RTP
โดย pprn อ 13 พ.ย. 2018 6:24 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
4
อ 13 พ.ย. 2018 6:24 pm โดย pprn
งานประจำวันที่ 13 พฤศจิกายน 2561
โดย prakon อ 13 พ.ย. 2018 10:00 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
7
อ 13 พ.ย. 2018 10:55 pm โดย prakon
งานประจำวันที่ 13 พฤศจิกายน 2561
โดย Ittichai_chupol อ 13 พ.ย. 2018 8:31 am บอร์ด M070 - อิทธิชัย ชูผล
0
3
อ 13 พ.ย. 2018 8:31 am โดย Ittichai_chupol
งานประจำวันที่ 13 พฤษจิกายน 2561
โดย tatiya อ 13 พ.ย. 2018 8:30 am บอร์ด M065 - ตติยะ นาชัย
0
3
อ 13 พ.ย. 2018 8:30 am โดย tatiya
งานประจำวันที่ 13 พฤศจิกายน 2561
โดย nice_13 อ 13 พ.ย. 2018 8:30 am บอร์ด M071 - พิชญ์สินี คงจร
2
4
อ 13 พ.ย. 2018 5:58 pm โดย nice_13
งานประจำวันที่ 13 พฤศจิกายน 2561
โดย pprn อ 13 พ.ย. 2018 8:27 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
2
อ 13 พ.ย. 2018 8:27 am โดย pprn
B - ปรับเปลี่ยนเทมเพลต เป็นแบบ phpbb
โดย Ittichai_chupol อ 13 พ.ย. 2018 1:03 am บอร์ด ThaiVI - Tester
0
2
อ 13 พ.ย. 2018 1:03 am โดย Ittichai_chupol
B - เพิ่มเเบ่งหน้า ใน extension กระทู้สมาชิก
โดย Ittichai_chupol อ 13 พ.ย. 2018 12:24 am บอร์ด ThaiVI - Tester
0
1
อ 13 พ.ย. 2018 12:24 am โดย Ittichai_chupol
งานประจำวันที่ 12 พฤศจิกายน 2561
โดย prakon จ 12 พ.ย. 2018 4:19 pm บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
9
จ 12 พ.ย. 2018 6:35 pm โดย prakon
งานประจำวันที่ 12 พฤศจิกายน 2561
โดย tai14 จ 12 พ.ย. 2018 4:07 pm บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
3
จ 12 พ.ย. 2018 4:07 pm โดย tai14
งานประจำวันที่ 12 พฤศจิกายน 2561
โดย nice_13 จ 12 พ.ย. 2018 4:01 pm บอร์ด M071 - พิชญ์สินี คงจร
0
3
จ 12 พ.ย. 2018 4:01 pm โดย nice_13
R - Email เเจ้งเตือนเมื่อ ลง lead
โดย thatsawan จ 12 พ.ย. 2018 2:13 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
1
จ 12 พ.ย. 2018 2:13 pm โดย thatsawan