Блог

Я использую элемент управления начальной загрузкой React и группу ввода.

Я создал один компонент и использовал его в других своих модулях.

Код выглядит следующим образом :

 import InputGroup from "react-bootstrap/InputGroup";
import Form from "react-bootstrap/Form"; 

export default class TextInput extends Component {

render() {
    var { value, maxLength, defaultInput, prefix, inputProps, placeholder, label, labelClass, formGroupClass, inputType, error, warning, onChange, disabled, mandatory } = this.props;
    return (
      <div className={styles.container}>
        <Form.Group className={formGroupClass}>
          {label?
            (<Form.Label className={labelClass}>{label}
              {mandatory ? <span className="text-danger"> *</span>
                : ""}
            </Form.Label>)
            : ""
          }
          <InputGroup>
            {prefix amp;amp; prefix !== "" ?
              <InputGroup.Prepend>
                <InputGroup.Text>{prefix}
                </InputGroup.Text>
              </InputGroup.Prepend> : ""}
            <Form.Control isInvalid={!!error} className={warning ? "border border-warning " : undefined}
              disabled={disabled}
              type={inputType}
              placeholder={placeholder}
              value={value}
              defaultValue={defaultInput}
              maxLength={maxLength}
              onChange={(e) => onChange(e.target.value)}
              onKeyPress={(e) => this.onKeyUp(e)}
              {...inputProps}
            />            
          </InputGroup>
          <Form.Text className="feedback-warn text-warning">
            {warning}
          </Form.Text>
          <Form.Control.Feedback type="invalid">
            {error}
          </Form.Control.Feedback>
        </Form.Group>
      </div>
    );
  }
}

}
 

И использовал этот компонент в других моих модулях, подобных этому :

 <TextInput
   placeholder={formData.mobileNum.label}
   inputType={"number"}
   error={formData.mobileNum.errMsg}
   value={formData.mobileNum.value}
   prefix={" 91"}
   maxLength="10"
   onChange={(text) =>
            changeValue(formData.mobileNum.propName, text)
   }
/>
 

Проблема, с которой я сталкиваюсь, заключается в том, что на устройстве Android, когда я нажимаю на поле ввода, цифровая клавиатура работает нормально.

В случае, если устройство ios inputType={"number"} не работает, так как я не могу получить цифровую клавиатуру.

Я попробовал некоторые исправления, но они также влияют на Android. Я хочу, чтобы цифровая клавиатура появлялась на обоих устройствах, когда я пытаюсь ввести поле ввода.

 <TextInput
   placeholder={formData.mobileNum.label}
   error={formData.mobileNum.errMsg}
   value={formData.mobileNum.value}
   prefix={" 91"}
   maxLength="10"
keyboardType="numeric" //add this
   onChange={(text) =>
            changeValue(formData.mobileNum.propName, text)
   }
/>
 

добавьте тип клавиатуры в ввод текста и удалите тип inputType

Я решил эту проблему. Совершил какую-то глупую ошибку, не заметив {…inputProps}, что он содержит все остальные реквизиты для ввода.

В моем компоненте TextInput просто добавлены методы : pattern и inputMode

 var { pattern, inputMode } = this.props


 <Form.Control isInvalid={!!error} className={warning ? "border border-warning " : undefined}
              disabled={disabled}
              type={inputType}
              placeholder={placeholder}
              value={value}
              pattern={pattern} // add this
              inputMode={inputMode} // add this
              defaultValue={defaultInput}
              maxLength={maxLength}
              onChange={(e) => onChange(e.target.value)}
              onKeyPress={(e) => this.onKeyUp(e)}
              {...inputProps}
            />     

 

Затем в других моих файлах я просто использовал эти реквизиты, как это :

 <TextInput
   ..other props
   pattern={"[0-9]*"}
   inputMode={"numeric"}
   onChange={(text) =>
            changeValue(formData.mobileNum.propName, text)
   }
/>

 

pattern={«[0-9]*»} и inputMode={«числовой»} заставят эти устройства ios использовать панель набора номера. Хотя одной опоры шаблона достаточно, режим ввода-это просто запасной вариант, если шаблон не работает.

Примечание -> Это не повлияет на поведение Android с цифровой клавиатурой.

Альтернатива :

Вместо изменения содержимого в основном компоненте мы можем использовать {…inputProps}

 <TextInput
   ...other props
   inputProps={{ pattern: "[0-9]*", inputMode: "numeric" }} //add this
   onChange={(text) =>
            changeValue(formData.mobileNum.propName, text)
   }
/>