Saya memiliki formulir desain semut dengan input dan saya perlu membatasi beberapa karakter untuk ditulis dalam input.

<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>

Jadi solusi ideal adalah menambahkan beberapa acara pers utama dan memvalidasinya seperti

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

Tapi dari definisi ts

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

Fungsi kekosongannya. ketika saya mencoba untuk mengembalikan false itu tidak akan membatasi. desain semut entah bagaimana terbelakang dan tidak mengembalikan nilai dari panggilan balik ini. pengguna tidak boleh diizinkan bahkan untuk menulisnya.

Saya juga tidak menggunakan status apa pun, hanya nilai awal untuk acara.

Apakah ada solusi cara menambahkan acara input onKeyPress, onKeyDown dll klasik, bukan acara desain semut?

Terima kasih

1
Juraj Kocan 20 September 2019, 13:28

2 jawaban

Jawaban Terbaik

Saya menerapkan sesuatu yang serupa pada input Antd beberapa hari yang lalu dengan fungsi umum dari jawaban lain. Ini berfungsi seperti yang diharapkan, cukup tulis regex untuk karakter apa pun yang ingin Anda izinkan, menggunakan React.KeyboardEvent sebagai parameter:

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;
   }
}

PEMBARUAN: Versi AntD apa yang Anda gunakan dan di mana Anda melihat definisi itu? Saya menggunakan 3.23.1, dan antarmuka InputProps tidak memiliki definisi eksplisit untuk onKeyPress. Namun komponen Input meneruskan semua alat peraga tambahan ke input HTML dasar yang dirender dalam pernyataan pengembaliannya, jadi seharusnya tidak ada konflik tipe apa pun.

Umumnya, event handler tidak mengembalikan nilai eksplisit, tetapi dengan default true, dan dapat mengembalikan false untuk menunjukkan bahwa acara telah dibatalkan, seperti fungsi di atas. Mengenai mengapa fungsi dengan tipe pengembalian void akan memungkinkan pengembalian false, itu adalah pengecualian yang disengaja yang dibuat oleh TypeScript, yang dijelaskan secara mendalam oleh jawaban ini.

4
Chris B. 20 September 2019, 15:35

Selain itu, saya hanya menggunakan format regex dengan desain 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>
-1
Majedur Rahaman 12 September 2020, 09:59