ในบ้างครั้งเวลาเราเขียน form ขึ้นมาแล้วมี input ใน form อยู่หลายอันแต่เราต้องการเก็บค่าของ input แต่ละอันทุกครั้งที่มีการเปลี่ยนแปลง แล้วค่อยจัดการ process ต่อเมื่อกดปุ่ม submit form เท่านั้น ใน React.js นั้นจะมีการใช้ state ในการเก็บค่าต่าง เราสามารถประยุกต์ร่วมกับ object event ของ DOM ได้ทำให้เราสามารถเขียน handle event onchange แค่ function เดียวที่รองรับ input หลายๆอันที่อยู่ใน form ได้

ที่นี้เรามาดูโค้ดตัวอย่างกันเลยครับ ขั้นแรกผมจะสร้าง ClassBasedComponent มีโค้ดดังนี้

    class ClassBasedComponent extends React.Component{
      constructor(){
        super()
        this.state = { 
          login: '',
          password: ''
        }
      }

      handleSubmit = (event) =>{
        event.preventDefault()
        console.log('Form sub')
        console.log(this.state)
      }

      handleChange = (event)=>{
        console.log('event name ' + event.target.name)
        console.log('event value ' + event.target.value)
        const newState = {}
        newState[event.target.name] = event.target.value
        this.setState(newState)
      }

      render(){
        return (
          <div>
            <h1>Hello React</h1>
            <h2>Thaicoding.net</h2>
            <form onSubmit={this.handleSubmit}>
              <input type="text" placeholder="Login" name="login" onChange={this.handleChange}  /><br/>
              <input type="password" placeholder="Password" name="password" onChange={this.handleChange}  /><br/>
              <button>Submit</button>
            </form>
          </div>
        )
      }
    }

โดยเจ้า ClassBasedComponent จะทำการ render form login ขึ้นมา มี input username กับ password แล้วก็มีปุ่ม submit สำหรับ click เมื่อทำการใส่ username กับ password เสร็จแล้ว จาก code สังเกตว่าทั้ง input username กับ password นั้นจะทำการเรียกใช้ function handleChange ทุกครั้งที่มีการเปลี่ยนแปลง แต่สำหรับ form submit นั้นจะเรียกใช้งาน handleSubmit

ที่นี้เรามาดูรายละเอียด handleSubmit กับ handleChange กันดีกว่า สังเกตว่าเริ่มแรกนั้น ClassBasedComponent จะมี constructor กำหนด state มา 2 ค่าคือ state ที่ชื่อว่า login กับ password เป็นค่าว่างเพื่อที่จะเก็บค่าที่ได้จากการพิมพ์ใน textbox username และ password นั้นเอง ซึ่งการเก็บค่านั้นจะจัดการโดย function ที่มีชื่อว่า handleChange นั้นเอง function นี้เขียนแบบ arrow function จะมี params 1 ค่าคือ event เป็น event object ใน DOM ซึ่ง react สามารถใช้ค่า event object ของ DOM ได้

แล้วที่นี้จะเขียน handleChange ยังไงให้เก็บค่า input control หลายๆอันละผ่านแค่การใช้งาน function เดียวแทนที่จะเขียน onchange ของแต่ละ input แยกออกไป คำตอบก็คือการใช้ event.target.name กับ event.target.value รวมกับ state ของ react ก็จะสามารถทำได้อย่างง่ายๆ ไม่มีปัญหาเลยครับ

      handleChange = (event)=>{
        console.log('event name ' + event.target.name)
        console.log('event value ' + event.target.value)
        const newState = {}
        newState[event.target.name] = event.target.value
        this.setState(newState)
      }

ซึ่งใน code จะเห็นว่ามีการกำหนดตัวแปรขึ้นมาเก็บค่า element ที่ใช้ชื่อเดียวกับ event.target.name ซึ่งจะมีค่าเท่ากับ name ของ control ที่มีการเปลี่ยนแปลงค่า ให้ทำการเก็บค่า value ของ control ตัวนั้น หลังจากนั้นก็จะทำการ update ค่าใน state ของ react ใหม่ทันที เพียงเท่านี้เราก็จะได้ค่าใหม่ล่าสุดของ control ที่ user มีการพิมพ์ค่าหรือเปลี่ยนแปลงค่าแล้ว

หน้าจอเมื่อลอง run
ค่าใน console เมื่อมีการลองพิมพ์ username, password

หลังจากที่เก็บค่า control ใน form เมื่อมีการเปลี่ยนค่าแล้วเมื่อเกิดการ submit form เราก็แค่ใช้ค่าจะ state เท่านั้นเองไม่ต้องไล่ดึงค่า value จาก control ต่างๆแล้ว สามารถดูโค้ดจาก function handleSubmit

      handleSubmit = (event) =>{
        event.preventDefault()
        console.log('Form sub')
        console.log(this.state)
      }

เนื่องจากเป็นการ submit form เลยมีการใช้คำสั่ง event.preventDefault() เพื่อเป็นการไม่ให้ default action ของ submit form ทำงานเพื่อที่เราจะได้ให้ทำตาม process ที่เราต้องการโดยในตัวอย่าง handleSubmit จะทำแค่ console.log แสดงค่าที่อยู่ใน state เท่านั้นเมื่อแสดงผลทาง console จะเห็นว่าเราจะได้ค่า่ต่างๆใน control ที่อยู่ใน form ที่มีการเปลี่ยนแปลงล่าสุดนั้นเอง

เมื่อ click ปุ่ม submit แล้วแสดงค่าใน state

จากตัวอย่างจะเห็นว่าเราสามารถใช้ event object รวมกับ state ของ react ทำให้ง่ายต่อการ handle onchange ของ control ต่างๆที่อยู่ใน form ได้ง่ายขึ้นและสามารถนำค่าไปใช้ได้โดยใช้ค่าใน state ที่เก็บไว้เรียบร้อยแล้ว

โค้ดตัวเต็ม

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>React Course</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>

  <script type="text/babel">

    const containerElem = document.getElementById('root');

    class ClassBasedComponent extends React.Component{
  
      constructor(){
        super()
        this.state = { 
          login: '',
          password: ''
        }
      }

      handleSubmit = (event) =>{
        event.preventDefault()
        console.log('Form sub')
        console.log(this.state)
      }

      handleChange = (event)=>{
        console.log('event name ' + event.target.name)
        console.log('event value ' + event.target.value)
        const newState = {}
        newState[event.target.name] = event.target.value
        this.setState(newState)
      }

      render(){
        return (
          <div>
            <h1>Hello React</h1>
            <h2>Thaicoding.net</h2>
            <form onSubmit={this.handleSubmit}>
              <input type="text" placeholder="Login" name="login" onChange={this.handleChange}  /><br/>
              <input type="password" placeholder="Password" name="password" onChange={this.handleChange}  /><br/>
              <button>Submit</button>
            </form>
          </div>
        )
      }
    }

    class App extends React.Component{
      render(){
        return(
          <div>
            <ClassBasedComponent />
          </div>
        )
      }
    }

    ReactDOM.render(<App />, containerElem)

  </script>
</body>

</html>

หรือจาก dowload ได้ที่ link ได้ด้านล่างเลยครับ สำหรับบทความครั้งนี้ก็ขอจบไว้แค่นี้นะครับติดได้ในบทความถัดไปขอบคุณครับ

Download SourceCode

Leave a Reply

Your email address will not be published. Required fields are marked *