圖形編輯器中，雖然編輯器內(nèi)核本身很重要，但相當(dāng)大的一部分工作是 UI 層的交互實(shí)現(xiàn)。
其中很重要的交互功能是用戶可以 通過(guò)輸入框去修改一些屬性。
不同類型的輸入框有著各自的規(guī)則，今天我們來(lái)看看怎么去實(shí)現(xiàn)這么一個(gè) 自定義規(guī)則輸入框 React 組件。
我們需要做一個(gè)自定義規(guī)則輸入框。它需要支持的核心功能是，失焦時(shí)：
一些次要的功能：
我之前的一篇文章講述過(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ǔ)正算法。
首先是 props 的設(shè)計(jì)。
interface ICustomRuleInputProps { parser: (newValue: string, preValue: string | number) => string | false; value: string | number; onBlur: (newValue: string) => void;}這里選擇非受控組件的做法，用一個(gè) inputRef 變量拿到 input 元素，通過(guò) inputRef.current.value 去讀寫內(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。
下面就基于這個(gè) CustomRuleInput，擴(kuò)展一個(gè)數(shù)字輸入框 NumberInput 組件。
該組件接受的 props：
校驗(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)} />效果：
然后是十六進(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)} /> );};除了數(shù)字和顏色值輸入框，CustomRuleInput 在圖形編輯器中用到的地方非常多，邏輯也不復(fù)雜，相比普通 input，多加一個(gè)校驗(yàn)補(bǔ)正的 parser 算法。
本文鏈接：http://www.www897cc.com/showinfo-26-14317-0.html圖形編輯器開發(fā)：實(shí)現(xiàn)自定義規(guī)則輸入框組件
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)