Biểu mẫu – Phản ứng – ví dụ biểu mẫu react js

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

  
 
 
 & lt; 
 input 
 
 type 
 
 
 = 
 
 "
 tệp 
" 
 
 
 / & gt ; 
 
  

  
 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; 
 

    
) 
 
; 
  
} 
}