在react中处理输入法合成问题

辅助hook

useImmediateEffect

与useEffect类似 在依赖数组变化后 立刻同步地执行副作用

ts 复制代码
import { useRef } from 'react'

/** 副作用函数 接受旧的依赖项 */
export type ImmediateEffect<Deps extends any[]> = (oldDeps?: Deps) => ImmediateEffectCleanup
/** 清理函数 */
export type ImmediateEffectCleanup = (() => any) | undefined | void

export function useImmediateEffect<Deps extends any[]>(effect: ImmediateEffect<Deps>, deps: Deps) {
  const prevDepsRef = useRef<Deps>()
  const prevCleanupRef = useRef<ImmediateEffectCleanup>()
  if (isDepsChanged(prevDepsRef.current, deps)) {
    prevCleanupRef.current?.()
    prevCleanupRef.current = effect(prevDepsRef.current)
  }
  prevDepsRef.current = deps
}

function isDepsChanged<Deps extends any[]>(prevDeps: Deps | undefined, deps: Deps) {
  if (!prevDeps || prevDeps.length !== deps.length) return true
  return prevDeps.some((prevValue, i) => !Object.is(prevValue, deps[i]))
}

useSemiControlledValue

取得一个值的半受控版本.外界传入的value变化时,此值也会立刻突变;在传入value不变时,此值可以自行变更.

ts 复制代码
import { useRef, useState } from 'react'
import { useMemoizedFn } from 'ahooks'
import { useImmediateEffect } from '../useImmediateEffect'

export function useSemiControlledValue<V = any>(valueController: {
  value?: V
  onChange?: (val: V) => void
}) {
  const { value, onChange } = valueController
  const [changedValue, setChangedValue] = useState(value)
  const currentValueRef = useRef(value)
  useImmediateEffect(() => {
    currentValueRef.current = changedValue
  }, [changedValue])
  useImmediateEffect(() => {
    currentValueRef.current = value
  }, [value])
  const currentValue = currentValueRef.current

  // 对外暴露的更新函数 参数是一个新值或者更新函数
  const onInnerChange: (arg: V | ((val?: V) => V)) => void = useMemoizedFn((arg: any) => {
    const newValue = typeof arg === 'function' ? arg(currentValue) : arg
    setChangedValue(newValue)
    onChange?.(newValue)
  })

  return [currentValue, onInnerChange] as const
}

useComposition

处理输入法合成事件.在本地维护一个输入法无关的value,在合成事件结束后,向外更新合成后的值

ts 复制代码
import { CompositionEventHandler, ChangeEventHandler, useState } from 'react'
import { useMemoizedFn } from 'ahooks'
import { useSemiControlledValue } from '../useSemiControlledValue'

export function useComposition(valueController: {
  value?: string
  onChange: (val: string) => void
}) {
  const [isComposing, setComposing] = useState(false)
  const [value, onInnerChange] = useSemiControlledValue({
    value: valueController.value,
  })
  // onChange时更新本地value
  const onChange = useMemoizedFn<ChangeEventHandler<HTMLInputElement>>((e) => {
    onInnerChange(e.target.value)
  })
  const onCompositionStart = useMemoizedFn(() => {
    setComposing(true)
  })
  // 输入法合成后更新外部value
  const onCompositionEnd = useMemoizedFn<CompositionEventHandler<HTMLInputElement>>((e) => {
    setComposing(false)
    valueController.onChange?.((e.target as HTMLInputElement).value)
  })
  const compositionProps: CompositionProps = {
    value,
    onChange,
    onCompositionStart,
    onCompositionEnd,
  }
  return {
    isComposing,
    compositionProps,
  }
}

使用例

ts 复制代码
const [search,setSearch] = useState<string>()
const { compositionProps } = useComposition({ value: search, onChange: setSearch })

<input {...compositionProps} />
相关推荐
Nicholas68几秒前
flutter视频播放器video_player_avfoundation之FVPVideoPlayer(二)
前端
文心快码BaiduComate1 分钟前
一人即团队,SubAgent引爆开发者新范式
前端·后端·程序员
掘金一周8 分钟前
2025年还有前端不会Nodejs ?| 掘金一周 9.25
android·前端·后端
Sailing11 分钟前
前端拖拽,看似简单,其实处处是坑
前端·javascript·面试
RoyLin12 分钟前
前端·后端·node.js
RoyLin1 小时前
C++ 基础与核心概念
前端·后端·node.js
记得坚持1 小时前
vue2插槽
前端·vue.js
臣臣臣臣臣什么臣1 小时前
uni-app 多文件上传:直接循环调用 uni.uploadFile 实现(并行 / 串行双模式)
android·前端
带只拖鞋去流浪1 小时前
Vue.js响应式API
前端·javascript·vue.js
Coder_R1 小时前
如何 把 Mac 上的 APK(app) 安装到安卓手机上?
前端·面试