javascript - הגבלת תווים בקלט ב-Ant Design

יש לי טופס של ant design עם שדות קלט ואני צריך למנוע כתיבה של תווים מסוימים בשדה הקלט.

<Form.Item
              {...formItemLayout}
              label={this.props.intl.formatMessage({ id: 'customer.form.zipCode' })}
            >
              {getFieldDecorator('zip_code', {
                validateTrigger: 'onBlur',
                initialValue: this.props.addressFormDefaults ? this.props.addressFormDefaults.zip_code : '',
                rules: [
                  {
                    transform: (value) => typeof value === 'string' ? value.trim() : undefined,
                    required: true, message: this.props.intl.formatMessage({ id: 'validation.requiredField' }),
                  },
                ],
              })(
                <Input
                  type="number"
                  size="large"
                  className={this.props.useSmartForm ? `${this.props.smartFormClassInstance} ${SMARTFORM_CLASS.ZIP}` : undefined}
                  form={this.props.formId}
                  disabled={this.props.formDisabled}
                />,
              )}
            </Form.Item>

אז הפתרון האידיאלי יהיה להוסיף כמה מאירועי הלחיצה של המקשים ולאמת אותם כמו

<Input
  type="number"
  onKeyDown={(event) => {
    // some validation;
    if (someValidation()) {
      return true;
    }
    return false;
  }}
/>;

אבל מההגדרה של ts

onKeyPress?: KeyboardEventHandler<T>;
type React.KeyboardEventHandler<T = Element> = (event: KeyboardEvent<T>) => void

זו פונקציית void. כשאני מנסה להחזיר false זה לא מגביל. אנט דיזיין איכשהו מגמגם ולא מחזיר ערך מהקולבק הזה. המשתמש אפילו לא צריך להיות מורשה לכתוב את זה.

גם אני לא משתמש בשום מצב, רק בערך התחלי לאירוע.

האם יש פתרון איך להוסיף אירועי קלט קלאסיים כמו onKeyPress, onKeyDown וכו', לא אירועי Ant Design?

תודה

תשובה #1

מִימשׁתי משהו דומה על שדות קלט של Antd רק לפני כמה ימים עם פונקציה כללית מתשובה אחרת. זה עובד כפי שציפיתי, פשוט כתבו ביטוי רגולרי עבור כל התווים שאתם רוצים לאפשר, תוך שימוש ב-React.KeyboardEvent כפרמטר:

const onKeyPress = (e: React.KeyboardEvent) => {
   const specialCharRegex = new RegExp("[a-zA-Z0-9@.' ,-]");
   const pressedKey = String.fromCharCode(!e.charCode ? e.which : e.charCode);
   if (!specialCharRegex.test(pressedKey)) {
      e.preventDefault();
      return false;
   }
}

עדכון: איזו גרסה של AntD אתה משתמש ואיפה אתה רואה את ההגדרה הזו? אני משתמש ב-3.23.1, והממשק InputProps אין לו הגדרה מפורשת ל-onKeyPress. עם זאת, רכיב ה-Input מעביר את כל התכונות הנוספות ל-input הבסיסי של HTML שהוא מייצר בהצהרת ההחזרה שלו, כך שלא אמורות להיות סתירות סוג.

בדרך כלל, מטפלי אירועים אינם מחזירים ערכים מפורשים, אך ברירת המחדל שלהם היא true, ויכולים להחזיר false כדי לציין שהאירוע בוטל, כפי שהפונקציה למעלה עושה. לגבי הסיבה שפונקציה עם סוג החזרה void תאפשר החזרת false, זו חריגה מכוונת שנעשית על ידי TypeScript, אשר מוסברת לעומק בתשובה זו.

תשובה #2

בנוסף, אני פשוט משתמש בפורמט regex עם עיצוב antd.

<Form.Item>
    {getFieldDecorator('mobile', {
        rules: [
            {
                required: true,
                pattern: new RegExp("^[0-9]*$"),
                message: "Wrong format!"
            },
        ],
    })(
        <Input
            className="form-control"
            type="text"
            placeholder="Phone number"
        />,
    )}
</Form.Item>