On this StackBlitz project:

Here is how I use both controls:

What I need is: To make IonInputMagic2 (which uses: IonInput) work as: IonInputMagic1 where the user can only enter numeric and even digits. This is because the IonInput uses all the styling and scripting of Ionic and I don't want to break all that by using: <input />.

Note: I have detected through the DOM that the IonInput is a wrapper of: <input />.

Any idea on how to achieve that?

If possible, please fork the StackBlitz above and post the link here.

Thanks!

CodePudding user response：

This change did the trick:

Here the full code for the component:

import { IonInput } from "@ionic/react";
import { useEffect, useState } from "react";

const IonInputMagic2 = props => {

  const { value, onChange, validityFunc, ...others } = props
  var isValidValue = validityFunc(value);
  const initialValue = (typeof value !== 'undefined' && isValidValue) ? value : '';
  const [currentValue, setCurrentValue] = useState(initialValue);

  useEffect(() => {
    setCurrentValue(initialValue);
  }, [initialValue]);

  const handleChange = (e) => {
    var value = e.target.value;
    if (!validityFunc(value)) {
      e.preventDefault();
      e.target.value = currentValue;
      return false;
    }
    setCurrentValue(value);
    if (onChange) {
      onChange(e);
    }
  };

  return (
    <IonInput value={currentValue} onIonInput={handleChange} {...others} />
  );
}

export default IonInputMagic2;