Ввод ограничить символы в дизайне муравья

Question

У меня есть муравьиная форма с входными данными, и мне нужно ограничить ввод некоторых символов.

<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

его недействительнофункция.когда я пытаюсь вернуть false, это не ограничивает.Муравьиный дизайн как-то запаздывает и не возвращает значение из этого обратного вызова.пользователь не должен иметь права даже писать это.

Также я не использую любое состояние, только начальное значение для события.

Есть ли решение, как добавить классические входные события onKeyPress, onKeyDown и т. Д., А не события разработки муравья?

ТНХ

Answer 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 перенаправляет все дополнительные реквизиты в базовый HTML-ввод, который он отображает, в свой оператор return, поэтому не должно быть никаких конфликтов типов.

Как правило, обработчики событий не возвращают явные значения, а обрабатываются по умолчанию true и может возвращать false, чтобы указать, что событие было отменено, как это делает функция выше.Что касается того, почему функция с возвращаемым типом void допускает возврат false, это намеренное исключение, сделанное TypeScript, которое подробно объясняется этим ответом .