Реализация повторно используемых методов для валидатора Ant Design (ReactJS)

Question

Я пытаюсь реализовать валидатор в соответствии с документацией, предоставленной ant design https://ant.design/components/form/

Методы работают, когда они размещены в одном классе / компоненте.Метод validator использует метод обратного вызова, который выбрасывает строку, в которой был вызван метод проверки.

Я пытаюсь добиться того, чтобы один и тот же метод валидатора можно было использовать повторно.Когда я помещаю их в другой класс, он не работает.

Я попытался переместить его в другой класс и экспортировать метод.При импорте метода в тот же компонент обратный вызов не работает.

Вот мой метод, который я использую для проверки:

mobileCountryCodeValidator = (rule, value, callback) => {
    const { getFieldValue } = this.props.form
    let countryCode = getFieldValue('phoneCountryCode')
    if (countryCode === '92') {
      if (value.substring(0, 1) !== '3') {
        callback('Number should start with 3 for Pakistan.')
      }
      callback()
    } else if (countryCode === '966') {
      if (value.substring(0, 2) !== '05') {
        callback('Number should start with 05 for Saudi Arabia.')
      }
      callback()
    }
  }

Здесь я вызываю вышеупомянутый метод.

<FormItem validateStatus="validating">
    {getFieldDecorator('phoneNumber', {rules: [
        { required: true, message: 'Please input your phone number.' },
        { len: 10, message: 'Phone number should be 10 digits long.' },
        { validator: this.numbersValidator },
        { validator: this.mobileCountryCodeValidator },
     ]})(
          <Input placeholder="Enter Mobile Number" />
     )}
</FormItem>

Итак, я ожидаю, что я смогу переместить метод mobileCountryCodeValidator в другой класс, чтобы он мог стать методом многократного использования.Поэтому я мог бы использовать их и в других компонентах.

Answer 1

Валидатору необходим объект form.

, вы можете сделать это с небольшим закрытием

mobileCountryCodeValidator = (form) => (rule, value, callback) => {
    const { getFieldValue } = form;  // this line changed
    let countryCode = getFieldValue('phoneCountryCode')
    if (countryCode === '92') {
      if (value.substring(0, 1) !== '3') {
        callback('Number should start with 3 for Pakistan.')
      }
      callback()
    } else if (countryCode === '966') {
      if (value.substring(0, 2) !== '05') {
        callback('Number should start with 05 for Saudi Arabia.')
      }
      callback()
    }
  }

и

<FormItem validateStatus="validating">
    {getFieldDecorator('phoneNumber', {rules: [
        { required: true, message: 'Please input your phone number.' },
        { len: 10, message: 'Phone number should be 10 digits long.' },
        { validator: this.numbersValidator },
        { validator: this.mobileCountryCodeValidator(this.props.form) },
     ]})(
          <Input placeholder="Enter Mobile Number" />
     )}
</FormItem>