Bài 9: ReactJS – Forms – Học ReactJS Full Đầy Đủ Nhất

constructor(props) {
    super(props);
    this.state = {
      email : ''
    }
}

&ltinput type="email" onChange={(event) => this.changeInputValue(event)}/>

changeInputValue(event){
     // Cập nhật state
    this.setState({
      [event.target.name]: event.target.value
    })
}

&ltform onSubmit={(event) => {
        this.submitForm(event)
}}>

submitForm(event) {
   //Chặn sự kiện mặc định của form
   event.preventDefault()
   //In ra giá trị của input trong form
   console.log(this.state) 
 }

validationForm() {
   const re = /\S+@\S+\.\S+/;
   //Kiểm tra email
   if (re.test(this.state.email)) return false;
   return true;
 }

submitForm(event) {
   //Chặn sự kiện mặc định của form
   event.preventDefault()
   //Validaton form
  if(!this.validationForm()) {
     alert('Email không đúng định dạng.')
   }
 }

&ltlink rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

import React from "react";
 
class App extends React.Component {
  constructor(props) {
    super(props);
    //Khởi tạo state chứa giá trị của input
    this.state = {
      email: "",
      password: ""
    };
  }
  render() {
    return (
      &ltdiv className="container" style={{ paddingTop: "5%" }}>
        &ltform
          onSubmit={e => {
            this.submitForm(e);
          }}
        >
          &ltdiv className="form-group">
            &ltlabel htmlFor="text"&gtEmail:

&ltinput
type=”text”
className=”form-control”
name=”email”
placeholder=”Enter email”
onChange={e => this.changeInputValue(e)}
/>

&ltdiv className=”form-group”>
&ltlabel htmlFor=”pwd”&gtPassword:
&ltinput
type=”password”
className=”form-control”
name=”password”
placeholder=”Enter password”
onChange={e => this.changeInputValue(e)}
/>

&ltbutton type=”submit” className=”btn btn-primary”>
Submit

);
}
}
export default App;

Tiếp theo, xây dựng hàm changeInputValue() có nhiệm vụ lấy giá của input sau đó cập nhật vào state.

changeInputValue(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
}

Xây dựng hàm validationForm() để kiểm tra các giá trị khi submit form 

validationForm() {
    let returnData = {
      error : false,
      msg: ''
    }
    const {email, password} = this.state
    //Kiểm tra email
    const re = /\S+@\S+\.\S+/;
    if (!re.test(email)) {
      returnData = {
        error: true,
        msg: 'Không đúng định dạng email'
      }
    }
    //Kiểm tra password
    if(password.length < 8) {
      returnData = {
        error: true,
        msg: 'Mật khẩu phải lớn hơn 8 ký tự'
      }
    }
    return returnData;
  }

Cuối cùng, xây dựng hàm submitForm() cho sự kiện submit form:

submitForm(e) {
    //Chặn các event mặc định của form
    e.preventDefault();
 
   //Gọi hàm validationForm() dùng để kiểm tra form
    const validation = this.validationForm()
 
    //Kiểm tra lỗi của input trong form và hiển thị
    if (validation.error) {
      alert(validation.msg)
    }else{
      alert('Submit form success')
    }
  }

Khởi chạy dự án Bất Động Sản bằng cách mở terminal lên và gõ dòng lệnh :

npm start

Ví dụ cơ bản :

Trong ví dụ trước, ta đã đặt tham số đầu vào của form với value = {this.state.data}. Điều này cho phép ta cập nhật trạng thái bất cứ khi nào giá trị input thay đổi.Mình sẽ sử dụng sự kiện onChange để xem sự thay đổi của input và cập nhật trạng thái phù hợp

App.jsx 

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         &ltdiv>
            &ltinput type = "text" value = {this.state.data} 
               onChange = {this.updateState} />
            &lth4>{this.state.data}

);
}
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(&ltApp/>, document.getElementById('app'));

Ví dụ nâng cao :

  Ở ví dụ sau, ta sẽ thấy cách sử dụng các form từ component con. Phương thức onChange sẽ kích hoạt cập nhật trạng thái và được chuyển đến giá trị đầu, sau đó hiển thị trên màn hình. Một ví dụ tương tự được sử dụng trong bài Sự kiện. Bất cứ khi nào ta cần cập nhật trạng thái từ component con, ta cần chuyển hàm sẽ xử lý việc cập nhật (updateState) như một props (updateStateProp).  

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         &ltdiv>
            &ltContent myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}>

);
}
}
class Content extends React.Component {
render() {
return (
&ltdiv>
&ltinput type = "text" value = {this.props.myDataProp}
onChange = {this.props.updateStateProp} />
&lth3>{this.props.myDataProp}

);
}
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(&ltApp/>, document.getElementById('app'));

Kết quả như hình bên dưới