圖形編輯器開(kāi)發(fā)：實(shí)現(xiàn)自定義規(guī)則輸入框組件
作者：前端西瓜哥
除了數(shù)字和顏色值輸入框，CustomRuleInput 在圖形編輯器中用到的地方非常多，邏輯也不復(fù)雜，相比普通 Input，多加一個(gè)校驗(yàn)補(bǔ)正的 Parser 算法。
圖形編輯器中，雖然編輯器內(nèi)核本身很重要，但相當(dāng)大的一部分工作是 UI 層的交互實(shí)現(xiàn)。
其中很重要的交互功能是用戶可以 通過(guò)輸入框去修改一些屬性。
不同類(lèi)型的輸入框有著各自的規(guī)則，今天我們來(lái)看看怎么去實(shí)現(xiàn)這么一個(gè) 自定義規(guī)則輸入框 React 組件。
需求
我們需要做一個(gè)自定義規(guī)則輸入框。它需要支持的核心功能是，失焦時(shí)：
- 嘗試對(duì)輸入的內(nèi)容進(jìn)行校驗(yàn)和補(bǔ)正，將得到的合法值去更新數(shù)據(jù)源；
- 上述操作后，如果無(wú)法得出合法值，恢復(fù)上一次的合法輸入；
一些次要的功能：
- 按下回車(chē)時(shí)自動(dòng)失焦；
- 點(diǎn)在輸入框時(shí)，自動(dòng)全選。
我之前的一篇文章講述過(guò)一個(gè)場(chǎng)景，即用戶輸入 hex 格式的顏色值時(shí)，應(yīng)該如何實(shí)現(xiàn) hex 的校驗(yàn)補(bǔ)正算法，去拿到一個(gè)合法的值。
當(dāng)時(shí)只說(shuō)了校驗(yàn)補(bǔ)正算法。這篇文章是它的一個(gè)補(bǔ)充，即去實(shí)現(xiàn)這么一個(gè)自定義規(guī)則組件，這個(gè)組件可以裝配不同格式對(duì)應(yīng)的校驗(yàn)補(bǔ)正算法。
組件實(shí)現(xiàn)
首先是 props 的設(shè)計(jì)。
- value：外部傳入的值，如果 props.value 發(fā)生改變，輸入框要立即改變。
- parser：轉(zhuǎn)換算法，會(huì)拿到輸入框的字符串內(nèi)容。函數(shù)的返回值返回值如果是 false，表示不合法；如果是字符串，這個(gè)字符串會(huì)通過(guò) props.onBlue 方法傳遞給調(diào)用者。
- onBlur：轉(zhuǎn)換成功后會(huì)被調(diào)用，在這里可以拿到最后的合法值。（感覺(jué) onChange 命名會(huì)不會(huì)更好）
interface ICustomRuleInputProps {
parser: (newValue: string, preValue: string | number) => string | false;
value: string | number;
onBlur: (newValue: string) => void;
}這里選擇非受控組件的做法，用一個(gè) inputRef 變量拿到 input 元素，通過(guò) inputRef.current.value 去讀寫(xiě)內(nèi)容。
不多說(shuō)，給出實(shí)現(xiàn)。
import { FC, useEffect, useRef } from 'react';
interface ICustomRuleInputProps {
parser: (newValue: string, preValue: string | number) => string | false;
value: string | number;
onBlur: (newValue: string) => void;
}
export const CustomRuleInput: FC<ICustomRuleInputProps> = ({
value,
onBlur,
parser
}) => {
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (inputRef.current) {
// 如果 props.value 改變，input 的內(nèi)容無(wú)條件同步
inputRef.current.value = String(value);
}
}, [value]);
return (
<input
ref={inputRef}
defaultValue={value}
notallow={() => {
// 點(diǎn)在 input 上，會(huì)自動(dòng)全選輸入框內(nèi)容
inputRef.current.select();
}}
notallow={(e) => {
// enter 時(shí)觸發(fā)失焦（注意中文輸入法下按下 enter 不要失焦）
if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
e.currentTarget.blur();
}
}}
notallow={(e) => {
if (inputRef.current) {
const str = inputRef.current.value.trim();
// 檢驗(yàn)補(bǔ)正
const newValue = parser(str, value);
if (newValue !== false) { // 能拿到一個(gè)合法值
e.target.value = String(newValue);
onBlur(newValue);
} else { // 拿不到合法值，恢復(fù)為上一次的合法值
e.target.value = String(value);
}
}
}}
/>
);
};線上 demo 地址：
https://codesandbox.io/s/hjmmz4
基于這個(gè)組件，我們可以擴(kuò)展各種特定效果的 input 組件。比如 NumberInput 和 ColorHexInput。
NumberInput 實(shí)現(xiàn)
下面就基于這個(gè) CustomRuleInput，擴(kuò)展一個(gè)數(shù)字輸入框 NumberInput 組件。
該組件接受的 props：
- value：數(shù)據(jù)源。如果你有需求，這里可以做一層單位轉(zhuǎn)換，比如角度轉(zhuǎn)弧度；
- min：最小值，如果小于 min，會(huì)修正為 min；
- onBlur：數(shù)據(jù)改變相應(yīng)事件。
校驗(yàn)補(bǔ)正算法在 NumberInput 組件內(nèi)部實(shí)現(xiàn)。
const parser={(str) => {
str = str.trim();
// 字符串轉(zhuǎn)數(shù)字
let number = Number(str);
if (!Number.isNaN(number) && number !== value) {
// 不能小于 min
number = Math.max(min, number);
console.log(number);
return String(number);
} else {
return false;
}
}}完整實(shí)現(xiàn)：
import { FC, useEffect, useRef } from 'react';
import { CustomRuleInput } from './CustomRuleInput';
interface INumberInputProps {
value: string | number;
min?: number;
onBlur: (newValue: number) => void;
}
export const NumberInput: FC<INumberInputProps> = ({
value,
min = -Infinity,
onBlur
}) => {
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.value = String(value);
}
}, [value]);
return (
<CustomRuleInput
parser={(str) => {
str = str.trim();
let number = parseToNumber(str);
if (!Number.isNaN(number) && number !== value) {
number = Math.max(min, number);
console.log(number);
return String(number);
} else {
return false;
}
}}
value={value}
notallow={(newVal) => onBlur(Number(newVal))}
/>
);
};用法：
const [num, setNum] = useState(123);
<NumberInput value={num} min={0} notallow={(val) => setNum(val)} />效果：
ColorHexInput
然后是十六進(jìn)制顏色輸入框。
這個(gè)算法我們?cè)谥暗奈恼轮v過(guò)了。
直接看組件實(shí)現(xiàn)：
import { FC, useEffect, useRef } from 'react';
import { CustomRuleInput } from './CustomRuleInput';
interface IProps {
value: string;
onBlur: (newValue: string) => void;
}
/**
* 補(bǔ)正為 `RRGGBB` 格式
*
* reference: https://mp.weixin.qq.com/s/RWlsT-5wPTD7-OpMiVhqiA
*/
export const normalizeHex = (hex: string) => {
hex = hex.toUpperCase();
const match = hex.match(/[0-9A-F]{1,6}/);
if (!match) {
return '';
}
hex = match[0];
if (hex.length === 6) {
return hex;
}
if (hex.length === 4 || hex.length === 5) {
hex = hex.slice(0, 3);
}
// ABC -> AABBCC
if (hex.length === 3) {
return hex
.split('')
.map((c) => c + c)
.join('');
}
// AB => ABABAB
// A -> AAAAAA
return hex.padEnd(6, hex);
};
export const ColorHexInput: FC<IProps> = ({ value, onBlur, prefix }) => {
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.value = String(value);
}
}, [value]);
return (
<CustomRuleInput
parser={(str, prevStr) => {
str = str.trim();
// check if it is a valid hex and normalize it
str = normalizeHex(str);
if (!str || str === prevStr) {
return false;
}
return str;
}}
value={value}
notallow={(newVal) => onBlur(newVal)}
/>
);
};結(jié)尾
除了數(shù)字和顏色值輸入框，CustomRuleInput 在圖形編輯器中用到的地方非常多，邏輯也不復(fù)雜，相比普通 input，多加一個(gè)校驗(yàn)補(bǔ)正的 parser 算法。
責(zé)任編輯：姜華
來(lái)源：
前端西瓜哥
