Hướng dẫn dùng react-native-phone-number-input trong PHP

Form ?? Cái tên rất quen thuộc đối với bất kì lập trình viên nào nhưng liêụ bạn đã bao giờ tự đặt câu hỏi nó là gì một cách cụ thể và sử dụng chúng trong một ứng dụng React như thế nào chưa ?

Hôm nay chúng ta sẽ cùng tìm hiểu cách sử dụng forms trong một ứng dụng React cơ bản.

1. Form là gì ?

Định nghĩa

The HTML element defines a form that is used to collect user input. Định nghĩa từ: w3schools

Về cơ bản, form là một đối tượng html được sử dụng để có thể tương tác với người dùng. Một HTML form bao chứa lấy các phần tử bên trong của nó. Các phần tử html được sử dụng trong form tương đối đa dạng nhưng được sử dụng thông dụng nhất như input, checkbox, radio button, submit button...

Form được sử dụng ở đâu ? Thông thường, form được sử dụng để:

Tìm kiếm
Contact forms [Form liên lạc]
Shopping carts checkout
Login and registration ...
Một ví dụ về việc sử dụng form đăng kí

2. React Form

Việc sử dụng forms trong React có thể làm cho form trở nên linh hoạt và tương tác nhiều hơn. Có hai cách xử lý form trong React, chúng khác nhau chủ yếu trong cách quản lý dữ liệu:

Nếu dữ liệu được xử lý bởi DOM, chúng ta gọi là `uncontrollerd components`

Nếu dữ liệu được xử lý bởi components, chúng ta gọi chúng là `controlled componens`

Như bạn có thể tưởng tượng, controlled components là những thành phần bạn sẽ sử dụng trong hầu hết thời gian tương tác với React. Nhưng thỉnh thoảng bạn vẫn cần sử dụng tới uncontrolled components, ví dụ như

Khi thay đổi các trạng thái trên form được quản lý bởi các component, chúng ta sử dụng onChange:

class Form extends React.Component {
  constructor[props] {
    super[props]
    this.state = { username: '' }
  }

  handleChange[event] {}

  render[] {
    return [
      
        Username:
        
      
    ]
  }
}

Trong class components, cập nhật trạng thái mới, chúng ta phải sử dụng this để có thể bind tới phương thức handleChange

class Form extends React.Component {
  constructor[props] {
    super[props]
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind[this]
  }

  handleChange[event] {
    this.setState[{ value: event.target.value }]
  }

  render[] {
    return [
      
        
      
    ]
  }
}

Tương tự, chúng ta sử dụng onSubmit để submit data khi form được gửi đi.

class Form extends React.Component {
  constructor[props] {
    super[props]
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind[this]
    this.handleSubmit = this.handleSubmit.bind[this]
  }

  handleChange[event] {
    this.setState[{ value: event.target.value }]
  }

  handleSubmit[event] {
    alert[this.state.username]
    event.preventDefault[]
  }

  render[] {
    return [
      
        
        
      
    ]
  }
}

Sử dụng validate trong form có thể được xử lý ngay bên trong hàm handleChange. Bạn có thể truy cập vào giá trị của state trước đó và thay đổi của state ngay sau khi người dùng tương tác trên DOM.

Dưới đây là một số ví dụ đối với các phần tử HTML khác của forms khi sử dụng trong React: Textarea:

select tag:


  Less than 18
  18+

Trên đây mình đã giới thiệu về forms và cách sử dụng form để validate trực tiếp dữ liệu trên DOM, cách submit data sử dụng forms trong React. Rất mong nhận đươc ý kiến đóng góp từ mọi người.

3. Tham khảo

//flaviocopes.com/react-forms/

2.1.0 • Public • Published a year ago

Readme
Explore BETA
2 Dependencies
7 Dependents
11 Versions

React Native Phone Number Input

Performance oriented React Native Phone Number Input with typings and proper validation for any country.

Made with ❤️ by developer for developers

Want to show your love?

Click on 🌟 button.

Table of Contents
Installation
Features
Usage
Props
Methods
FAQ
- Is it supported and tested both on android and iOS?
- NSURLResponse allHeaderFields: unrecognized selector sent to instance XX crash?
Contributing
- Step 1
- Step 2
- Step 3
Support
License
Hire

Installation

$ yarn add react-native-phone-number-input

$ npm i react-native-phone-number-input --save

Features

📱 Works with iOS and Android, Cross-platform 💯
🎌 Built-in country picker [uses react-native-country-picker-modal]
🔧 Completely customizable UI!
✔️ Proper validation [uses google-libphonenumber]

Usage

For more complete example open App.tsx

import React, { useState, useRef } from "react";
import {
  SafeAreaView,
  StyleSheet,
  View,
  StatusBar,
  TouchableOpacity,
  Text,
} from "react-native";
import PhoneInput from "react-native-phone-number-input";
import { Colors } from "react-native/Libraries/NewAppScreen";

const App: React.FC = [] => {
  const [value, setValue] = useState[""];
  const [formattedValue, setFormattedValue] = useState[""];
  const [valid, setValid] = useState[false];
  const [showMessage, setShowMessage] = useState[false];
  const phoneInput = useRef[null];
  return [
    
      
      
        
          {showMessage && [
            
              Value : {value}
              Formatted Value : {formattedValue}
              Valid : {valid ? "true" : "false"}
            
          ]}
           {
              setValue[text];
            }}
            onChangeFormattedText={[text] => {
              setFormattedValue[text];
            }}
            withDarkTheme
            withShadow
            autoFocus
          />
           {
              const checkValid = phoneInput.current?.isValidNumber[value];
              setShowMessage[true];
              setValid[checkValid ? checkValid : false];
            }}
          >
            Check
          
        
      
    
  ];
};

export default App;

Props

defaultCode?: CountryCode
withDarkTheme?: boolean
withShadow?: boolean
autoFocus?: boolean
defaultValue?: string
value?: string
disabled?: boolean
disableArrowIcon?: boolean
placeholder?: string;
onChangeCountry?: [country: Country] => void;
onChangeText?: [text: string] => void;
onChangeFormattedText?: [text: string] => void;
containerStyle?: StyleProp;
textContainerStyle?: StyleProp;
renderDropdownImage?: JSX.Element;
textInputProps?: TextInputProps;
textInputStyle?: StyleProp;
codeTextStyle?: StyleProp;
flagButtonStyle?: StyleProp;
countryPickerButtonStyle : StyleProp;
layout?: "first" | "second";
filterProps?: CountryFilterProps;
countryPickerProps?: any;

Methods

getCountryCode: [] => CountryCode
getCallingCode: [] => string | undefined
getNumberAfterPossiblyEliminatingZero: [] => {number: string , formattedNumber: string };
isValidNumber: [number: string] => boolean

FAQ

Is it supported and tested both on android and iOS?

YES

NSURLResponse allHeaderFields: unrecognized selector sent to instance XX crash?

Upgrade versions['Flipper'] ||= '~> 0.37.0' in podfile.

Contributing

To get started...

Step 1

Option 1
- 🍴 Fork this repo!
Option 2
- 👯 Clone this repo to your local machine using //github.com/garganurag893/react-native-phone-number-input

Step 2

HACK AWAY!🔨🔨🔨

Step 3

🔃 Create a new pull request using //github.com/garganurag893/react-native-phone-number-input.

Support

Reach out to me at one of the following places!

Twitter at //twitter.com/AnuragG94634191
Medium at //medium.com/@garganurag893
Instagram at //www.instagram.com/the_only_anurag/
Email at

License

MIT license

Hire

Looking for a React/React-Native Freelance Expert? Email at

Keywords

react-native
phone
telephone
phone input
input
tel
input text
international
react-native-component
ios
android