重新封装Antd Input组件，解决中文输入问题

最新推荐文章于 2023-10-27 13:44:40 发布

原创最新推荐文章于 2023-10-27 13:44:40 发布 · 5.3k 阅读

3 ·

CC 4.0 BY-SA版权

前端知识专栏收录该内容

68 篇文章

订阅专栏

本文介绍了一个React高阶组件(HOC)的实现案例，该组件利用Ant Design的Input组件，支持实时输入和composition事件，适用于中文输入场景。通过自定义hook管理输入状态，确保组件在受控和非受控模式下都能正确处理输入变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { useState, useEffect } from 'react'
import { Input } from 'antd'

function BaseHOC(key) {
  return function(props) {
    const { defaultValue, value, onChange } = props
    const hasValue = props.hasOwnProperty('value')
    // 用户切换到底是显示 value 还是 input
    // 不能直接用 isOnComposition 原因是，这个值发生变化不会触发重新渲染
    // 不能只使用 flag 原因是，setFlag 是异步的
    const [flag, setFlag] = useState(false)
    // 非中文输入时候显示 value。中文输入的时候显示 input
    const [input, setInput] = useState(hasValue ? value : defaultValue)
    useEffect(
      function() {
        if (hasValue && input !== value) {
          setInput(value)
        }
      },
      [value]
    )
    let isOnComposition = false
    function handleChange(e) {
      setInput(e.target.value)
      if (isOnComposition) return
      onChange && onChange(e)
    }
    function handleComposition(e) {
      if ('compositionend' === e.type) {
        isOnComposition = false
        handleChange(e)
      } else {
        isOnComposition = true
      }
      if (flag !== isOnComposition) {
        setFlag(isOnComposition)
      }
    }
    let Component = Input
    if (key) {
      Component = Input[key]
    }
    return (
      <Component
        {...props}
        value={hasValue && !flag ? value : input}
        onCompositionStart={handleComposition}
        onCompositionUpdate={handleComposition}
        onCompositionEnd={handleComposition}
        onChange={handleChange}
      />
    )
  }
}

const Component = function(props) {
  return BaseHOC()(props)
}

Component.Search = function(props) {
  return BaseHOC('Search')(props)
}

Component.TextArea = function(props) {
  return BaseHOC('TextArea')(props)
}

Component.Password = Input.Password

Component.Group = Input.Group

export default Component