在這個StackBlitz專案上：
以下是我如何使用這兩個控制元件：
我需要的是：使IonInputMagic2（使用：）IonInput作業為：IonInputMagic1用戶只能輸入數字甚至數字。這是因為IonInput使用了所有的樣式和腳本，Ionic我不想通過使用來破壞所有這些：<input />。
注意：我通過 DOM 檢測到IonInput是的包裝器：<input />。
關于如何實作這一目標的任何想法？
如果可能，請分叉StackBlitz上述內容并在此處發布鏈接。
謝謝！
uj5u.com熱心網友回復：
這種改變起到了作用：
這里是組件的完整代碼：
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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/511581.html
上一篇：Vue3從setup函式中理解示例并將它們應用到Setup標簽中
下一篇：我如何對一個月內的資料進行排序