syncfusion-react-numerictextbox（syncfusion React numerictextbox 开发）

Implementing NumericTextBox

Component Overview

The NumericTextBox is a Syncfusion React input component designed specifically for numeric data entry. It provides:

• Formatted input - Automatic number formatting (currency, percentage, scientific notation)
• Validation - Built-in min/max range validation with strict mode
• Spin buttons - Visual increment/decrement controls with customizable steps
• Decimal control - Manage decimal places and precision during input
• Accessibility - Full WCAG 2.2 compliance with ARIA attributes and keyboard navigation
• Internationalization - Locale support, RTL (Right-to-Left) languages
• Form ready - Integrates seamlessly with React forms and state management

Documentation & Navigation Guide

When the user needs help with NumericTextBox, guide them to the appropriate reference:

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• CSS imports and themes
• React component import and basic JSX
• Creating your first NumericTextBox
• Running the application

Formats & Validation

📄 Read: references/formats-and-validation.md

• Standard format specifiers (currency, percentage, number, scientific)
• Custom number formats with # and 0 patterns
• Range validation with min and max properties
• strictMode for enforcing valid ranges
• Real-world formatting examples

Spin Buttons & Step Control

📄 Read: references/spin-buttons-and-step.md

• Enabling/disabling spin button arrows
• Step property for increment values
• Customizing spin button appearance and behavior
• Precision with step increments
• Keyboard shortcuts (Arrow Up/Down)

Adornments & Styling

📄 Read: references/adornments-and-styling.md

• Prefix and suffix text (units, currency symbols)
• CSS classes and custom styling
• Placeholder, disabled, and readonly states
• Focus and blur event handling
• Theme customization and appearance options

Precision & Decimals

📄 Read: references/precision-decimals.md

• decimals property for controlling decimal places
• validateDecimalOnType for real-time precision validation
• Maintaining trailing zeros in display
• Rounding behavior and edge cases
• Precision during input vs display

Two-Way Binding & Forms

📄 Read: references/two-way-binding-forms.md

• Two-way value binding in React (value prop + onChange)
• Controlled component patterns
• React state management
• React Hook Form integration
• Form validation with NumericTextBox

Globalization & Accessibility

📄 Read: references/globalization-accessibility.md

• Internationalization and locale support
• Right-to-Left (RTL) language support
• WCAG 2.2 accessibility compliance
• Keyboard navigation and shortcuts
• Screen reader support with ARIA attributes
• Focus management and color contrast

How-To Guide

📄 Read: references/how-to-guide.md

• Custom validation patterns
• Preventing nullable input
• Maintaining trailing zeros
• Customizing spin button icons
• Common troubleshooting and edge cases

API Reference

📄 Read: references/api.md

• Complete properties reference (value, min, max, step, format, decimals, etc.)
• Methods reference (increment, decrement, getText, focusIn, focusOut, destroy, etc.)
• Events reference with full argument types (change, blur, focus, created, destroyed)

Quick Start Example

Here's a minimal working example to get started:

import React, { useState } from 'react';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import '@syncfusion/ej2-base/styles/material3.css';
import '@syncfusion/ej2-buttons/styles/material3.css';
import '@syncfusion/ej2-inputs/styles/material3.css';

export default function App() {
  const [value, setValue] = useState(10);

  return (
    <div style={{ padding: '20px' }}>
      <h3>Enter a Number</h3>
      <NumericTextBoxComponent
        value={value}
        onChange={(e) => setValue(e.value)}
        min={0}
        max={100}
        step={1}
      />
      <p>Current Value: {value}</p>
    </div>
  );
}

Key points:

• Import NumericTextBoxComponent from @syncfusion/ej2-react-inputs
• Import required CSS themes (material3 in this example)
• Use value prop for the current numeric value
• Use onChange event to update React state
• Add min, max, step for validation and controls

Common Patterns

1. Currency Input

<NumericTextBoxComponent
  value={99.99}
  format="c2"
  min={0}
  placeholder="Enter amount"
/>

2. Percentage Input

<NumericTextBoxComponent
  value={50}
  format="p"
  min={0}
  max={100}
/>

3. Integer-Only Input

<NumericTextBoxComponent
  value={10}
  decimals={0}
  step={1}
  min={0}
/>

4. Bounded Range with Validation

<NumericTextBoxComponent
  value={25}
  min={0}
  max={100}
  strictMode={true}
  placeholder="0-100"
/>

5. Form Field with Label

<div>
  <label>Product Quantity:</label>
  <NumericTextBoxComponent
    value={qty}
    onChange={(e) => setQty(e.value)}
    min={1}
    step={1}
    prefix="Units: "
  />
</div>

Key Properties Reference

Common Use Cases

1. Shopping Cart - Quantity Input

• Integer-only, min=1, step=1, spinner for easy adjustment

2. Price Calculator - Currency Field

• format="c2", min=0, prefix="$", two decimal places

3. Rating or Score - 0-100 Range

• min=0, max=100, strictMode=true, no decimals

4. Discount Percentage

• format="p", min=0, max=100, two decimal places

5. Measurement Input

• decimals=2, suffix=" cm", min=0, spinner for precision

6. Financial Form

• format="c2", validation, form integration, accessibility

Next Steps

1. Package requirement: The packages @syncfusion/ej2-react-inputs, @syncfusion/ej2-base, and @syncfusion/ej2-buttons must be present in your project's package.json. Confirm they are already installed and that your lockfile (e.g., package-lock.json or yarn.lock) pins their versions for supply-chain integrity. When adding them, use an explicit version range such as @syncfusion/ej2-react-inputs@^27.x.x to avoid unpinned dependency risks.
2. Getting Started reference: For installation details and basic setup, see references/getting-started.md.
3. Choose your reference: Based on your use case (formatting, validation, forms, etc.), navigate to the relevant reference section above.
4. Review examples: Each reference contains ready-to-use code samples that can be adapted to your requirements.
5. Customize: Modify the examples to fit your specific use case and application needs.

For detailed implementation guidance, navigate to the appropriate reference file above.