vivo TWS Air開箱體驗：真輕 臻好聽
在vivo S15系列新機(jī)的發(fā)布會上，vivo的最新款真無線藍(lán)牙耳機(jī)vivo TWS Air也一同發(fā)布，本次就這款耳機(jī)新品給大家?guī)硪粋€簡單的分享。外包裝盒上，vivo TWS Air保持了vivo自家產(chǎn)
圖形編輯器中，雖然編輯器內(nèi)核本身很重要，但相當(dāng)大的一部分工作是 UI 層的交互實現(xiàn)。
其中很重要的交互功能是用戶可以 通過輸入框去修改一些屬性。
不同類型的輸入框有著各自的規(guī)則，今天我們來看看怎么去實現(xiàn)這么一個 自定義規(guī)則輸入框 React 組件。
我們需要做一個自定義規(guī)則輸入框。它需要支持的核心功能是，失焦時：
一些次要的功能：
我之前的一篇文章講述過一個場景，即用戶輸入 hex 格式的顏色值時，應(yīng)該如何實現(xiàn) hex 的校驗補(bǔ)正算法，去拿到一個合法的值。
當(dāng)時只說了校驗補(bǔ)正算法。這篇文章是它的一個補(bǔ)充，即去實現(xiàn)這么一個自定義規(guī)則組件，這個組件可以裝配不同格式對應(yīng)的校驗補(bǔ)正算法。
首先是 props 的設(shè)計。
interface ICustomRuleInputProps { parser: (newValue: string, preValue: string | number) => string | false; value: string | number; onBlur: (newValue: string) => void;}這里選擇非受控組件的做法，用一個 inputRef 變量拿到 input 元素，通過 inputRef.current.value 去讀寫內(nèi)容。
不多說，給出實現(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)容無條件同步 inputRef.current.value = String(value); } }, [value]); return ( <input ref={inputRef} defaultValue={value} notallow={() => { // 點在 input 上，會自動全選輸入框內(nèi)容 inputRef.current.select(); }} notallow={(e) => { // enter 時觸發(fā)失焦（注意中文輸入法下按下 enter 不要失焦） if (e.key === 'Enter' && !e.nativeEvent.isComposing) { e.currentTarget.blur(); } }} notallow={(e) => { if (inputRef.current) { const str = inputRef.current.value.trim(); // 檢驗補(bǔ)正 const newValue = parser(str, value); if (newValue !== false) { // 能拿到一個合法值 e.target.value = String(newValue); onBlur(newValue); } else { // 拿不到合法值，恢復(fù)為上一次的合法值 e.target.value = String(value); } } }} /> );};線上 demo 地址：
https://codesandbox.io/s/hjmmz4
基于這個組件，我們可以擴(kuò)展各種特定效果的 input 組件。比如 NumberInput 和 ColorHexInput。
下面就基于這個 CustomRuleInput，擴(kuò)展一個數(shù)字輸入框 NumberInput 組件。
該組件接受的 props：
校驗補(bǔ)正算法在 NumberInput 組件內(nèi)部實現(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; }}}完整實現(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)制顏色輸入框。
這個算法我們在之前的文章講過了。
直接看組件實現(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，多加一個校驗補(bǔ)正的 parser 算法。
本文鏈接：http://www.tebozhan.com/showinfo-26-14317-0.html圖形編輯器開發(fā)：實現(xiàn)自定義規(guī)則輸入框組件
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號