← กลับไปยัง Dev Center
ทดสอบ Input Elements
หน้าเพจสำหรับทดสอบ NumberInput และ CurrencyInput components พร้อมตัวอย่างการใช้งานแบบต่างๆ
Comprehensive Test Cases
ทดสอบทุกกรณีของ NumberInput พร้อมแสดง external state, onChange triggers, และ validation behavior
วิธีทดสอบ:
- พิมพ์ตัวเลขในช่อง input
- สังเกต "onChange Triggered" alert ที่แสดงขึ้นทุกครั้งที่มีการเปลี่ยนแปลง
- ดู External State ที่แสดงค่าปัจจุบัน
- ทดสอบ validation โดยพิมพ์ค่าที่เกิน min/max แล้ว blur
- ทดสอบ decimal places โดยพิมพ์ทศนิยมเกินที่กำหนด
- ทดสอบ thousand separator โดยพิมพ์ตัวเลขหลายหลัก
- ทดสอบค่าลบโดยพิมพ์เครื่องหมาย - (ถ้า allowNegative=true)
Test 1: Integer, No Separator
จำนวนเต็ม ไม่มีตัวคั่น
decimalPlaces: 0
thousandSeparator: false
thousandSeparatorOnType: false
allowNegative: true
min: -20
max: 100
External State
50
Type: number
onChange Count
0
Total triggers
Test 2: Integer, Separator on Blur
จำนวนเต็ม มีตัวคั่นเมื่อ blur
decimalPlaces: 0
thousandSeparator: true
thousandSeparatorOnType: false
allowNegative: true
min: -20
max: 100
External State
50
Type: number
onChange Count
0
Total triggers
Test 3: Integer, Separator on Type
จำนวนเต็ม มีตัวคั่นตอนพิมพ์
decimalPlaces: 0
thousandSeparator: true
thousandSeparatorOnType: true
allowNegative: true
min: -20
max: 100
External State
50
Type: number
onChange Count
0
Total triggers
Test 4: 2 Decimals, No Separator
ทศนิยม 2 ตำแหน่ง ไม่มีตัวคั่น
decimalPlaces: 2
thousandSeparator: false
thousandSeparatorOnType: false
allowNegative: true
min: -20
max: 100
External State
50.5
Type: number
onChange Count
0
Total triggers
Test 5: 2 Decimals, Separator on Blur
ทศนิยม 2 ตำแหน่ง มีตัวคั่นเมื่อ blur
decimalPlaces: 2
thousandSeparator: true
thousandSeparatorOnType: false
allowNegative: true
min: -20
max: 100
External State
50.5
Type: number
onChange Count
0
Total triggers
Test 6: 2 Decimals, Separator on Type
ทศนิยม 2 ตำแหน่ง มีตัวคั่นตอนพิมพ์
decimalPlaces: 2
thousandSeparator: true
thousandSeparatorOnType: true
allowNegative: true
min: -20
max: 100
External State
50.5
Type: number
onChange Count
0
Total triggers
Test 7: 4 Decimals, No Separator
ทศนิยม 4 ตำแหน่ง ไม่มีตัวคั่น
decimalPlaces: 4
thousandSeparator: false
thousandSeparatorOnType: false
allowNegative: true
min: -20
max: 100
External State
50.1234
Type: number
onChange Count
0
Total triggers
Test 8: 4 Decimals, Separator on Blur
ทศนิยม 4 ตำแหน่ง มีตัวคั่นเมื่อ blur
decimalPlaces: 4
thousandSeparator: true
thousandSeparatorOnType: false
allowNegative: true
min: -20
max: 100
External State
50.1234
Type: number
onChange Count
0
Total triggers
Test 9: 4 Decimals, Separator on Type
ทศนิยม 4 ตำแหน่ง มีตัวคั่นตอนพิมพ์
decimalPlaces: 4
thousandSeparator: true
thousandSeparatorOnType: true
allowNegative: true
min: -20
max: 100
External State
50.1234
Type: number
onChange Count
0
Total triggers
Test 10: Negative Min, Positive Max
min=-20, max=51, allowNegative=true
decimalPlaces: 2
thousandSeparator: true
thousandSeparatorOnType: true
allowNegative: true
min: -20
max: 51
External State
50
Type: number
onChange Count
0
Total triggers
Test 11: Min at Zero
min=0, max=100, allowNegative=false
decimalPlaces: 2
thousandSeparator: true
thousandSeparatorOnType: true
allowNegative: false
min: 0
max: 100
External State
50
Type: number
onChange Count
0
Total triggers
Test 12: Both Negative Range
min=-100, max=-10, allowNegative=true
decimalPlaces: 2
thousandSeparator: true
thousandSeparatorOnType: true
allowNegative: true
min: -100
max: -10
External State
-50
Type: number
onChange Count
0
Total triggers
Test 13: Max at Zero
min=-100, max=0, allowNegative=true
decimalPlaces: 2
thousandSeparator: true
thousandSeparatorOnType: true
allowNegative: true
min: -100
max: 0
External State
-50
Type: number
onChange Count
0
Total triggers
Test 14: No Min/Max
ไม่มีการจำกัดค่า
decimalPlaces: 2
thousandSeparator: true
thousandSeparatorOnType: true
allowNegative: true
External State
50
Type: number
onChange Count
0
Total triggers
Test 15: Large Numbers
ทดสอบตัวเลขขนาดใหญ่
decimalPlaces: 2
thousandSeparator: true
thousandSeparatorOnType: true
allowNegative: false
min: 0
max: 999999999
External State
1234567.89
Type: number
onChange Count
0
Total triggers
Test 16: No Negative, No Separator
ไม่รับค่าลบ ไม่มีตัวคั่น
decimalPlaces: 0
thousandSeparator: false
thousandSeparatorOnType: false
allowNegative: false
min: 0
max: 100
External State
50
Type: number
onChange Count
0
Total triggers
สิ่งที่ควรสังเกต:
- onChange Trigger: จะถูกเรียกทุกครั้งที่ค่าเปลี่ยน (ไม่รอ blur)
- Validation: จะตรวจสอบ min/max เมื่อ blur และแสดง error state
- Decimal Places: จำกัดทศนิยมตามที่กำหนด (ตัดทิ้งทันทีเมื่อพิมพ์เกิน)
- Thousand Separator: แสดงเมื่อ blur (หรือตอนพิมพ์ถ้า thousandSeparatorOnType=true)
- Negative Numbers: สามารถพิมพ์ - ได้เฉพาะเมื่อ allowNegative=true
- External State: เป็น number หรือ null เสมอ (ไม่ใช่ string)
NumberInput - Basic Tests
Value: null
โค้ด:
<NumberInput placeholder="กรอกตัวเลข" value={value} onChange={onChange} />Value: null
โค้ด:
<NumberInput thousandSeparator={false} />Value: null
โค้ด:
<NumberInput thousandSeparator={true} />Value: null
โค้ด:
<NumberInput decimalPlaces={0} />Value: 50
โค้ด:
<NumberInput min={0} max={100} />Value: null
Value: null
Value: null
Value: null
Value: null
Value: null
โค้ด:
<NumberInput max={100} />Value: null
โค้ด:
<NumberInput min={0} max={1000} />Arrow Keys Step Change Tests
🎯 การใช้งานปุ่มลูกศร
- เปิดใช้งาน: ตั้งค่า
enableArrowKeysStepChange=true - ArrowUp: เพิ่มค่าตาม step ที่กำหนด
- ArrowDown: ลดค่าตาม step ที่กำหนด
- กดค้าง: ค่าจะเพิ่ม/ลดอย่างต่อเนื่อง และเร่งความเร็วขึ้นเมื่อกดค้างนานขึ้น
- Min/Max: ค่าจะไม่เกินขอบเขตที่กำหนด
- ค่าว่าง: หากช่องว่าง กดลูกศรจะเริ่มจาก 0
Value: 10
Value: 50
Value: 100
Value: 5.5
Value: 50
Local State with Validation Demo
📝 การทำงานของ Local State
- Local Display Value: เก็บค่าที่ผู้ใช้พิมพ์ทั้งหมด (รวมค่าที่ไม่ valid)
- Validated Value: ค่าที่ผ่าน validation แล้ว (ส่งไปยัง onChange)
- Error State: แสดงเมื่อค่าไม่ผ่าน min/max validation
- onChange: จะถูกเรียกเฉพาะเมื่อค่า valid เท่านั้น
Input Value: 50
Validated Value: 50
State Value: 50
Validation Behavior Tests
การทำงานของ Local State และ Validation
- ขณะพิมพ์: ค่าที่พิมพ์จะถูกเก็บใน local state ทันที (displayValue) แม้จะยัง validate ไม่ผ่าน
- onChange callback: จะถูกเรียกเฉพาะเมื่อค่าที่พิมพ์เป็นตัวเลขที่ valid เท่านั้น
- Min/Max validation: จะทำงานเมื่อ blur เท่านั้น ไม่ได้ validate ขณะพิมพ์
- Format (thousand separator): จะแสดงเมื่อ blur (ยกเว้น thousandSeparatorOnType=true)
- Decimal places: จำกัดจำนวนตัวเลขหลังจุดทศนิยมขณะพิมพ์
🔴 Error State Behavior
เมื่อค่าที่กรอกไม่ผ่าน validation (min/max):
- ขอบของ input จะเปลี่ยนเป็นสีแดง
- มี shake animation เพื่อดึงดูดความสนใจ
- ค่าที่กรอกจะยังคงอยู่ (ไม่ถูกเปลี่ยนเป็น min/max อัตโนมัติ)
- ไม่มีการเรียก onChange (state value ไม่เปลี่ยน)
- ผู้ใช้ต้องแก้ไขค่าให้ถูกต้องเอง
- Error state จะหายเมื่อผู้ใช้คลิกเข้าไปแก้ไข (focus อีกครั้ง)
CurrencyInput
฿
Value: null
$
Value: null
€
Value: null
฿
Value: null
คุณสมบัติหลัก
NumberInput
- จัดรูปแบบตัวเลขเมื่อ blur (ตัวคั่นหลักพัน, ทศนิยม)
- ป้องกันการกรอกอักขระที่ไม่ใช่ตัวเลข
- เพิ่ม/ลดค่าด้วยปุ่มลูกศร (เปิดใช้งานผ่าน enableArrowKeysStepChange)
- รองรับการกำหนดค่าต่ำสุด/สูงสุด
- ปรับแต่งจำนวนทศนิยมได้
CurrencyInput
- ขยายมาจาก NumberInput (มีคุณสมบัติครบ)
- แสดงสัญลักษณ์สกุลเงิน (THB, USD, EUR, GBP, JPY, CNY)
- กำหนดตำแหน่งสกุลเงินผ่าน props (prefix/suffix)
- รองรับหลายสกุลเงิน