Bạn đang xem : ví dụ biểu mẫu react js

Các phần tử biểu mẫu HTML hoạt động hơi khác so với các phần tử DOM khác trong React, vì các phần tử biểu mẫu tự nhiên giữ một số trạng thái bên trong. Ví dụ: biểu mẫu dưới dạng HTML thuần túy này chấp nhận một tên duy nhất:

  

& lt;

biểu mẫu

& gt;

& lt;

nhãn

& gt; < / p>

Tên:

& lt;

đầu vào

loại

=

"

text

"

tên

=

"

tên

"

/ & gt;

& lt; /

nhãn

& gt;

& lt;

đầu vào

loại

=

"

đệ trình

"

value

=

"

Gửi

"

/ & gt;

& lt; /

biểu mẫu

& gt;

Biểu mẫu này có hành vi biểu mẫu HTML mặc định là duyệt đến một trang mới khi người dùng gửi biểu mẫu. Nếu bạn muốn hành vi này trong React, nó sẽ hoạt động. Nhưng trong hầu hết các trường hợp, thật tiện lợi khi có một hàm JavaScript xử lý việc gửi biểu mẫu và có quyền truy cập vào dữ liệu mà người dùng đã nhập vào biểu mẫu. Cách tiêu chuẩn để đạt được điều này là sử dụng kỹ thuật gọi là “các thành phần được kiểm soát”.

Các thành phần được kiểm soát

Trong HTML, các phần tử biểu mẫu như & lt; input & gt; , & lt; textarea & gt; & lt; select & gt; thường duy trì trạng thái của riêng chúng và cập nhật nó dựa trên thông tin nhập của người dùng. Trong React, trạng thái có thể thay đổi thường được giữ trong thuộc tính trạng thái của các thành phần và chỉ được cập nhật với setState () .

Chúng ta có thể kết hợp cả hai bằng cách làm cho trạng thái React trở thành “nguồn chân lý duy nhất”. Sau đó, thành phần React hiển thị một biểu mẫu cũng kiểm soát những gì xảy ra trong biểu mẫu đó khi người dùng nhập tiếp theo. Phần tử biểu mẫu đầu vào có giá trị được kiểm soát bởi React theo cách này được gọi là "thành phần được kiểm soát".

Ví dụ: nếu chúng ta muốn đặt tên cho ví dụ trước đó là tên khi nó được gửi, chúng ta có thể viết biểu mẫu dưới dạng một thành phần được kiểm soát:

  

class

NameForm

mở rộng

React

.

Thành phần

< p class = "dấu chấm câu mã thông báo"> {

hàm tạo

(

đạo cụ

)

{

super

(

đạo cụ

)

;

this

.

bang

=

{

giá trị

:

''

}

;

this

.

handleChange

=

this

.

handleChange

.

< p class = "chức năng mã thông báo"> ràng buộc

(

cái này

)

;

cái này

.

handleSubmit

=

cái này

.

handleSubmit

.

ràng buộc

< p class = "dấu chấm câu mã thông báo"> (

cái này

)

;

}

handleChange

(

sự kiện

)

{

this

.

setState

(

{

giá trị

: < / p> sự kiện

.

target

.

value

}

)

;

}

handleSubmit

(

sự kiện

)

{

alert

(

'Tên đã được gửi:'

+

this

.

bang

.

giá trị

)

;

sự kiện

.

PreventDefault

(

)

;

}

kết xuất

(

)

{

return

(

& lt;

biểu mẫu

onSubmit

=

{

cái này

.

handleSubmit

} < / p>

& gt;

& lt;

nhãn

& gt;

Tên:

type

=

"

văn bản

"

giá trị

=

{

cái này < / p>

.

bang

.

value

onChange

=

{

< p class = "từ khóa mã thông báo"> cái này

. p> handleChange

}

/ & gt;

p>

& lt; /

nhãn

& gt;

& lt;

đầu vào < / p>

type

=

"

gửi

"

giá trị

=

"

Gửi

" < / p>

/ & gt;

& lt; /

& gt;

)

;

}

}

Hãy thử trên CodePen

Vì thuộc tính value được đặt trên phần tử biểu mẫu của chúng tôi, nên giá trị được hiển thị sẽ luôn là this. state.value , làm cho trạng thái React trở thành nguồn chân lý. Vì handleChange chạy trên mỗi lần nhấn phím để cập nhật trạng thái React, giá trị được hiển thị sẽ cập nhật khi người dùng nhập.

Với một thành phần được kiểm soát, giá trị của đầu vào luôn được điều khiển bởi trạng thái React. Mặc dù điều này có nghĩa là bạn phải nhập thêm một chút mã, nhưng giờ đây bạn cũng có thể chuyển giá trị cho các phần tử giao diện người dùng khác hoặc đặt lại giá trị đó từ các trình xử lý sự kiện khác.

Thẻ textarea

Trong HTML, phần tử & lt; textarea & gt; xác định văn bản của nó theo phần tử con của nó:

  

& lt;

textarea

& gt;

Xin chào, đây là một số văn bản trong một vùng văn bản

& lt; /

textarea

& gt;

Trong React, & lt; textarea & gt; sử dụng value . Bằng cách này, biểu mẫu sử dụng & lt; textarea & gt; có thể được viết rất giống với biểu mẫu sử dụng đầu vào một dòng:

  

class

Bài luận

mở rộng

React

.

Thành phần

< p class = "dấu chấm câu mã thông báo"> {

hàm tạo

(

đạo cụ

)

{

super

(

đạo cụ

)

;

this

.

bang

=

{

value

:

'Vui lòng viết một bài luận về phần tử DOM yêu thích của bạn.'

< p class = "gatsby-highlight-code-line">

}

;

this

.

handleChange

=

this

.

handleChange

.

< p class = "chức năng mã thông báo"> ràng buộc

(

cái này

)

;

this

.

handleSubmit

=

this

.

handleSubmit

.

< p class = "chức năng mã thông báo"> ràng buộc

(

cái này

)

;

}

handleChange

(

sự kiện

)

{

this

.

setState

(

{

giá trị

: < / p> sự kiện

.

target

.

value

}

)

;

}

handleSubmit

(

sự kiện

)

{

alert

(

'Một bài luận đã được gửi:'

+

this

.

bang

.

giá trị

)

;

sự kiện

.

PreventDefault

(

)

;

}

kết xuất

(

)

{

trả về

(

& lt;

biểu mẫu

onSubmit

=

{

cái này

.

handleSubmit

}

& gt;

& lt;

nhãn < / p>

& gt;

Bài luận:

& lt;

textarea

value

=

{

này

.

bang

.

value

}

onChange

=

{

cái này

.

handleChange

}

/ & gt;

& lt; /

nhãn

& gt;

& lt;

đầu vào < / p>

type

=

"

gửi

"

giá trị

=

"

Gửi

" < / p>

/ & gt;

& lt; /

& gt;

)

;

}

}

Lưu ý rằng this.state.value được khởi tạo trong hàm tạo, để vùng văn bản bắt đầu với một số văn bản trong đó.

Thẻ được chọn

Trong HTML, & lt; select & gt; tạo một danh sách thả xuống. Ví dụ: HTML này tạo một danh sách thả xuống gồm các hương vị:

  

& lt;

chọn

& gt;

& lt;

tùy chọn

giá trị

=

"

bưởi

"

& gt;

Bưởi

& lt; /

tùy chọn

& gt;

& lt;

tùy chọn

giá trị

=

"

vôi

"

& gt;

Vôi

& lt; /

tùy chọn

& gt;

& lt;

tùy chọn

được chọn

value

=

"

dừa

"

& gt;

Dừa

& lt; /

tùy chọn

& gt;

& lt;

tùy chọn

giá trị

=

"

xoài

"

& gt;

Mango

& lt; /

tùy chọn

& gt;

& lt; /

chọn

& gt;

Lưu ý rằng tùy chọn Dừa được chọn ban đầu do thuộc tính đã chọn . React, thay vì sử dụng thuộc tính đã chọn này, hãy sử dụng thuộc tính value trên root chọn thẻ . Điều này thuận tiện hơn trong một thành phần được kiểm soát vì bạn chỉ cần cập nhật nó ở một nơi. Ví dụ:

  

class

FlavorForm

mở rộng

React

.

Thành phần

< p class = "dấu chấm câu mã thông báo"> {

hàm tạo

(

đạo cụ

)

{

super

(

đạo cụ

)

;

this

.

bang

=

{

giá trị

:

'dừa'

}

;

this

.

handleChange

=

this

.

handleChange

.

< p class = "chức năng mã thông báo"> ràng buộc

(

cái này

)

;

this

.

handleSubmit

=

this

.

handleSubmit

.

< p class = "chức năng mã thông báo"> ràng buộc

(

cái này

)

;

}

handleChange

(

sự kiện

)

{

this

.

setState

(

{

giá trị

: < / p> sự kiện

.

target

.

value

}

)

;

}

handleSubmit

(

sự kiện

)

{

alert

(

'Hương vị yêu thích của bạn là:'

+

this

.

bang

.

giá trị

)

;

sự kiện

.

PreventDefault

(

)

;

}

kết xuất

(

)

{

trả về

(

& lt;

form

onSubmit

=

{

cái này

.

Xử lý gửi

}

& gt;

& lt;

nhãn < / p>

& gt;

Chọn hương vị yêu thích của bạn:

& lt;

chọn

value

=

{

này

.

bang

.

value

}

onChange

=

{

cái này

.

handleChange

}

& gt;

& lt;

tùy chọn

value

=

" bưởi

"

& gt;

Bưởi

& lt; /

tùy chọn

& gt;

& lt;

tùy chọn < / p>

value

=

"

vôi

"

& gt;

< p class = "token clear-text"> Lime

& lt; /

& gt;

& lt;

tùy chọn < / p>

value

=

"

dừa

"

& gt;

< p class = "token clear-text"> Dừa

& lt; /

& gt;

& lt;

tùy chọn < / p>

value

=

"

xoài

"

& gt;

< p class = "token clear-text"> Mango

& lt; /

& gt;

& lt; /

chọn

& gt;

& lt; /

nhãn

& gt;

& lt;

đầu vào < / p>

type

=

"

gửi

"

giá trị

=

"

Gửi

" < / p>

/ & gt;

& lt; /

& gt;

)

;

}

}

Hãy thử trên CodePen

Nhìn chung, điều này khiến cho & lt; input type = "text" & gt; , & lt ; textarea & gt; & lt; select & gt; đều hoạt động rất giống nhau - tất cả đều chấp nhận thuộc tính value mà bạn có thể sử dụng để triển khai thành phần được kiểm soát.

Lưu ý

Bạn có thể chuyển một mảng vào thuộc tính value , cho phép bạn chọn nhiều tùy chọn trong một chọn Thẻ :

  

& lt;

chọn

nhiều

=

{

true

}

< / p>

value

=

{

[

'B'

,

'C'

]

}

& gt;

Thẻ nhập tệp

Trong HTML, & lt; input type = "file" & gt; cho phép người dùng chọn một hoặc nhiều tệp từ bộ nhớ thiết bị của họ để tải lên máy chủ hoặc bị JavaScript thao túng thông qua API tệp .

  

& lt;

input

type

=

"

tệp

"

/ & gt ;

Vì giá trị của nó là chỉ đọc nên nó là một thành phần không được kiểm soát trong React. Nó sẽ được thảo luận cùng với các thành phần không được kiểm soát khác sau trong tài liệu .

Xử lý nhiều đầu vào

Khi bạn cần xử lý nhiều phần tử input được kiểm soát, bạn có thể thêm tên thuộc tính cho từng phần tử và để hàm xử lý chọn việc cần làm dựa trên giá trị của event.target.name .

Ví dụ:

  

class

Đặt chỗ

mở rộng

React

.

Thành phần

< p class = "dấu chấm câu mã thông báo"> {

hàm tạo

(

đạo cụ

)

{

super

(

đạo cụ

)

;

this

.

state

=

{

isGoing

:

true

,

numberOfGuests

:

2

}

;

this

.

handleInputChange

=

cái này

.

handleInputChange

.

< p class = "chức năng mã thông báo"> ràng buộc

(

cái này

)

;

}

handleInputChange

(

sự kiện

)

{

const

target

=

event

.

target

;

const

value

=

target

.

type

===

'hộp kiểm'

?

target

.

đã kiểm tra

:

target

.

value

; >

const

name

=

target

.

tên

;

this

setState

> (

{

[

name

]

:

giá trị

}

)

;

}

kết xuất

(

)

{

return

(

& lt;

biểu mẫu

& gt; < / p>

& lt;

nhãn < / p>

& gt;

Sẽ đến:

& lt;

đầu vào < / p>

name

=

"

isGoing

"

loại

=

" hộp kiểm

"

đã kiểm tra

=

{

cái này

.

bang

. p> isGoing

}

onChange

=

{

cái này

.

handleInputChange

} p>

/ & gt;

& lt; /

nhãn

& gt;

& lt;

br < / p>

/ & gt;

& lt;

nhãn < / p>

& gt;

Số lượng khách:

& lt;

đầu vào < / p>

name

=

"

numberOfGuests

"

loại

=

" số

"

value

=

{

cái này

.

bang

. p> numberOfGuests

}

onChange

=

{

cái này

.

handleInputChange

} p>

/ & gt;

& lt; /

nhãn

& gt;

& lt; /

& gt;

)

;

}

}

Hãy thử trên CodePen >

Lưu ý cách chúng tôi sử dụng cú pháp ES6 tên thuộc tính đã tính để cập nhật khóa trạng thái tương ứng với tên đầu vào đã cho:

 

this

. p>

setState

(

{

[

name

]

:

giá trị

}

)

;

Nó tương đương với mã ES5 sau:

  

var

partState

= < / p>

{

}

;

partState

[

name

]

=

giá trị

;

cái này

.

setState

(

partState

)

;

Ngoài ra, vì setState () tự động hợp nhất trạng thái một phần thành trạng thái hiện tại , chúng tôi chỉ cần gọi nó với các phần đã thay đổi.

Giá trị rỗng đầu vào được kiểm soát

Việc chỉ định value prop trên thành phần được kiểm soát sẽ ngăn người dùng thay đổi đầu vào trừ khi bạn muốn. Nếu bạn đã chỉ định một giá trị nhưng đầu vào vẫn có thể chỉnh sửa được thì có thể bạn đã vô tình đặt giá trị . code> thành hoặc

Đoạn mã sau đây chứng minh điều này. (Đầu vào bị khóa lúc đầu nhưng có thể chỉnh sửa sau một thời gian ngắn.)

  ReactDOM 

.

createRoot < / p>

(

mountNode

)

.

kết xuất

(

& lt;

input

value

=

"

xin chào

"

/ & gt ;

)

;

setTimeout

(

setTimeout

setTimeout> (

)

{

ReactDOM

.

createRoot

(

mountNode

)

.

kết xuất

(

& lt;

đầu vào

giá trị

=

{

null

}

/ & gt;

)

;

}

,

1000

)

;

Các giải pháp thay thế cho các thành phần được kiểm soát

Đôi khi có thể tẻ nhạt khi sử dụng các thành phần được kiểm soát, vì bạn cần viết một trình xử lý sự kiện cho mọi cách dữ liệu của bạn có thể thay đổi và chuyển tất cả trạng thái đầu vào thông qua một thành phần React. Điều này có thể trở nên đặc biệt khó chịu khi bạn đang chuyển đổi một codebase có sẵn thành React hoặc tích hợp một ứng dụng React với một thư viện không phải React. Trong những tình huống này, bạn có thể muốn xem các thành phần không được kiểm soát , một kỹ thuật thay thế để triển khai các biểu mẫu đầu vào.

Các giải pháp được đảm bảo đầy đủ

Nếu bạn đang tìm kiếm một giải pháp hoàn chỉnh bao gồm xác thực, theo dõi các trường đã truy cập và xử lý việc gửi biểu mẫu, thì Formik là một trong số các lựa chọn phổ biến. Tuy nhiên, nó được xây dựng dựa trên các nguyên tắc giống nhau về các thành phần được kiểm soát và trạng thái quản lý - vì vậy đừng bỏ qua việc tìm hiểu chúng.


Xem thêm những thông tin liên quan đến chủ đề ví dụ biểu mẫu react js

Learn how to use Props in React in 19 minutes (for beginners)

  • Tác giả: Sonny Sangha
  • Ngày đăng: 2021-09-20
  • Đánh giá: 4 ⭐ ( 4860 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The first 1,000 people to use this link will get a 1 month free trial of Skillshare: https://skl.sh/2Srfwuf

    🚨 Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: https://www.papareact.com/course

    This video is designed to get you familiar with Props in React where we cover topics such:
    👉 What Props stands for
    👉 Where are Props used
    👉 How are Props passed
    👉 Build an Amazon style app to explain how Props work!

    🔴 LOOKING FOR THE CODE? 🛠️
    https://links.papareact.com/github

    📩 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
    Sign up to the PAPA Newsletter here 👉 https://links.papareact.com/newsletter

    👇🏻FOLLOW ME HERE:
    Instagram: https://links.papareact.com/instagram
    Facebook: https://links.papareact.com/facebook
    LinkedIn: https://links.papareact.com/linkedin
    Twitter: https://links.papareact.com/twitter
    Discord: https://links.papareact.com/discord

    💰 WANT TO SUPPORT THE CHANNEL?
    Donate here: https://links.papareact.com/donate
    Grab some PAPA Merch: https://links.papareact.com/merch

    🕐 TIMESTAMPS:
    00:00 Intro
    00:19 Skillshare Sponsorship
    02:00 Introduction to Props
    03:13 Example of using Props
    06:29 Building a demo app for Props
    12:04 Destructuring Props
    12:43 Building a Sub Component
    14:14 Passing down Props
    15:47 Refactoring to Class Based Component
    17:16 A small tip!
    18:06 Summary
    18:34 Outro

    react props javascript

Cách dùng Formik để tạo biểu mẫu trong React

  • Tác giả: thptlongxuyen.edu.vn
  • Đánh giá: 3 ⭐ ( 5735 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Formik khiến việc tạo biểu mẫu trong React dễ dàng hơn. Dưới đây là cách dùng Formik để tạo biểu mẫu trong React.

ReactJS: Tìm hiểu thông qua ví dụ

  • Tác giả: 200lab.io
  • Đánh giá: 4 ⭐ ( 6085 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ReactJS là gì? Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu về ReactJS thông qua một vài ví dụ cực kỳ đơn giản.

Cách tạo các biểu mẫu cơ bản bằng React Hooks

  • Tác giả: topdev.vn
  • Đánh giá: 3 ⭐ ( 9000 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong Dự án React cho người mới bắt đầu này, chúng ta sẽ học cách xây dựng các biểu mẫu cơ bản bằng cách sử dụng React hooks

ReactJS - Biểu mẫu

  • Tác giả: isolution.pro
  • Đánh giá: 3 ⭐ ( 5071 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong chương này, chúng ta sẽ học cách sử dụng các biểu mẫu trong React. Ví dụ đơn giản Trong ví dụ sau, chúng tôi sẽ đặt một biểu mẫu đầu vào với value = {this.state.data}. Điều này cho phép cập nhật trạng thái bất cứ khi nào giá trị đầu vào thay đổi. Chúng tôi đang sử dụngonChange sự...

Làm việc với các biểu mẫu trong React.js bằng Bộ công cụ cơ bản

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 7047 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu Trong quá trình làm việc với React.js, tôi thường phải xử lý các biểu mẫu. Tôi đã thử sử dụng Redux-Form, React-Redux-Form , nhưng không có thư viện nào phù hợp với tất cả nhu cầu…

Các biểu mẫu lạ mắt trong React với Reactstrap

  • Tác giả: galaxyz.net
  • Đánh giá: 4 ⭐ ( 2080 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Xóa dữ liệu khỏi bảng - xóa bản ghi khỏi mysql

By ads_php