刚遇到 react input 受控组件原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net无法输入中文的情况：

【原创不易，请尊重版权】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

<input value={value} onChange={onChange} />

在网上搜索了很多，知道了问题原因，但是大本文作者：唐霜，转载请注明出处。【本文受版权保护】部分文献都实际上没有解决问题。网上大部分转载请注明出处：www.tangshuang.net【未经授权禁止转载】文献，只解决了 onChange 的问题【原创不易，请尊重版权】原创内容，盗版必究。，但是没有解决 value 和 onCh未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netange 一起用的问题。value 属性本文版权归作者所有，未经授权不得转载。【本文受版权保护】导致 input 成为一个完完全全的受控【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net组件。value 的值决定当前 inpu转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。t 的展示内容。因此，网上的文献只提供了【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。一些参考，并不能解决问题本质。

【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net

因 value 属性导致无法输入中文的原本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。因在于，react 会用 onChang转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】e 这个接口响应任意输入，而如果在此时修【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】改 value 值，就会导致 DOM 的本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。重绘（react 通过实时处理 inpu原创内容，盗版必究。未经授权，禁止复制转载。t 的 DOM 节点的 value 属性本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】值来保证重绘后使用正确的 value，你【作者：唐霜】【转载请注明来源】可以通过开发者工具查看这个 input 【作者：唐霜】原创内容，盗版必究。节点在输入时的变化），直接导致中文输入法【未经授权禁止转载】原创内容，盗版必究。框消失，输入框内变成刚才输入的英文字符（著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】甚至带空格）。onChange 接管 i未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。nput 的一系列属性，它不是单纯的 c【未经授权禁止转载】转载请注明出处：www.tangshuang.nethange 或 input 事件。当然，转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】在 type=text 上，它主要功能是【版权所有，侵权必究】【未经授权禁止转载】接管 input，但是 onInput 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。实际上还是有效。

本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net

我在 jqvm 中实际上也遇到这个问题。当时发现通过响本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。应式方法替换真实 DOM 之后，原有的输【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】入态会消失（没有 focus），所以后来【关注微信公众号：wwwtangshuangnet】【本文受版权保护】解决办法是，保存原始真实 DOM，每次更转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net新后用原来的 DOM 把新绘入的 DOM著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】 给替换掉，再做一些输入态的处理（例如光本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】标位置）。

【未经授权禁止转载】转载请注明出处：www.tangshuang.net原创内容，盗版必究。

显然，react 的处理方式不是这样，r【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.neteact 也保存了真实 DOM，但是每次【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】更新 value 之后，会对 DOM 节【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。点的 value 进行复杂加工。不过理论【版权所有，侵权必究】未经授权，禁止复制转载。上，react 面临同样的问题，所以它应【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。该也要解决这个输入态问题，这还会牵扯到 【作者：唐霜】【版权所有】唐霜 www.tangshuang.netfocus 和 blur，下面会提到。总著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】而言之，要解决无法输入中文的问题，还是要【作者：唐霜】转载请注明出处：www.tangshuang.net从真实 DOM 入手解决。

【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【转载请注明来源】

import React, { useRef } from 'react'

export function Input(props) {
  const el = useRef(null)
  const { onChange, onFocus, onBlur, value, defaultValue, ...attrs } = props
  const _value = ('value' in props) ? value : ('defaultValue' in props) ? defaultValue : null
  const handleChange = (e) => {
    if (onChange) {
      onChange(e)
    }
  }
  const forceSetValue = () => {
    if ('value' in props && el.current) {
      const input = el.current
      input.value = value
      input.setAttribute('value', value)
    }
  }

  let inputing = false

  return (
    <input
      {...attrs}
      defaultValue={_value}
      ref={(input) => {
        if (!input) {
          return
        }

        el.current = input
        forceSetValue()
      }}

      // react 在focus/blur时会重新设值，如果没有下面的操作，会导致focus/blur之后，变空
      // TODO 由于是异步操作，会导致文字闪动，光标定位到最末尾
      onFocus={(e) => {
        setTimeout(forceSetValue, 10)
        onFocus && onFocus(e)
      }}
      onBlur={(e) => {
        setTimeout(forceSetValue, 150)
        onBlur && onBlur(e)
      }}

      onCompositionStart={() => {
        inputing = true
      }}
      onCompositionEnd={(e) => {
        inputing = false
        handleChange(e)
      }}
      onChange={(e) => {
        if (!inputing) {
          handleChange(e)
        }
      }}
    />
  )
}
export default Input

首先第一步，就是借鉴网上资料提供的方法，著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。干掉 value，使用 defaultV【转载请注明来源】【未经授权禁止转载】alue。完成这一步之后，就可以实现正常【作者：唐霜】本文版权归作者所有，未经授权不得转载。输入中文了（从这里可以看出无法输入中文的【原创不易，请尊重版权】【本文首发于唐霜的博客】罪魁祸首还是受控机制）。接下来的问题就是

【转载请注明来源】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】

• 既要能够通过 onChange 把修改后著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】的值传出去，
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】
• 同时又要能保证 value 属性和真实 【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】DOM 的 value 是同步的。
【未经授权禁止转载】【本文受版权保护】

这里有个问题，input 组件的 def【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netaultValue 属性会带来新的问题，【本文首发于唐霜的博客】原创内容，盗版必究。如果由于切换视图当前组件被销毁了，再切换未经授权，禁止复制转载。【原创内容，转载请注明出处】回来，此时由于 defaultValue【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】 属性的逻辑，input 的显示内容不会原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】变成新传入的 defaultValue 本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】的值，而是仍然采用之前的值。假如你一进入原创内容，盗版必究。本文作者：唐霜，转载请注明出处。界面的时候，defaultValue 是著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】空的（defaultValue={val【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。ue} value 为空），那么当你输入转载请注明出处：www.tangshuang.net原创内容，盗版必究。了一波，修改了 value，然后切走了，【原创不易，请尊重版权】【未经授权禁止转载】但是你想切回来重新继续输入（defaul原创内容，盗版必究。本文作者：唐霜，转载请注明出处。tValue={value} 此时 va【版权所有，侵权必究】未经授权，禁止复制转载。lue 不为空），你会发现 input 【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。内容空空如也。这是 defaultVal【原创内容，转载请注明出处】未经授权，禁止复制转载。ue 的弊端，它让 input 是非受控本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。的。这也是为什么，我们无论用 value【本文首发于唐霜的博客】【转载请注明来源】 还是 defaultValue 都无法【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】满足我们正常输入中文的问题。

【本文受版权保护】【原创不易，请尊重版权】

通过 onChange 把修改后的值传出【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】去这个好办。我在代码里面加了 compo【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】sitions 控制，但是实际上不需要也【原创内容，转载请注明出处】【未经授权禁止转载】无所谓，大不了就是 onChange 传原创内容，盗版必究。转载请注明出处：www.tangshuang.net出去的值是不怎么好看的字符串（带空格的拼【原创内容，转载请注明出处】【未经授权禁止转载】音），加了 compositions 控著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net制，保证每次 onChange 出去的都【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】是完整的中文字符串，在拼音输入期间并没有【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net触发 onChange，外部也不会接收到本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】。所以，本质上，无法输入中文的问题，和 【转载请注明来源】转载请注明出处：www.tangshuang.netcompositions 无关，这个结论【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】可能和网上大部分资料的说法都相反。

【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net

保证当前这个 Input 组件的 val【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ue 和真实 DOM 的 value 的本文版权归作者所有，未经授权不得转载。【转载请注明来源】同步，则是我这个解决办法的核心，依托真实【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。 DOM，直接将真实 DOM 节点的 v转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】alue 和 value attribu本文版权归作者所有，未经授权不得转载。【本文受版权保护】te 都修改为和外部传入的 value 未经授权，禁止复制转载。【版权所有，侵权必究】值相等，这样这个组件虽然还是 react本文作者：唐霜，转载请注明出处。【转载请注明来源】 组件，但是已经在 DOM 层面被我魔改【版权所有，侵权必究】【转载请注明来源】了。通过这个魔改，解决了上面所说的 de著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。faultValue 无法控制 inpu【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】t 的问题。现在，在形式上，Input 著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】组件接收 value 和 onChang【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】e 两个 prop，它是一个完全支持中文未经授权，禁止复制转载。未经授权，禁止复制转载。输入的受控组件了。

【未经授权禁止转载】【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net

不过 react 又干了些多余的事，在每原创内容，盗版必究。【原创不易，请尊重版权】次 focus 和 blur 时，都会去原创内容，盗版必究。转载请注明出处：www.tangshuang.net检查组件受控情况和 value 值，导致【原创不易，请尊重版权】【本文首发于唐霜的博客】非受控组件的内部状态每次都是初始值（当第原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net一次进来 defaultValue 为空未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net时，那么这个 input 就一直都是空）【原创不易，请尊重版权】【原创内容，转载请注明出处】。所以，我又加了 onFocus 和 o【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。nBlur 两个属性，在里面通过一个延时转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net操作，在 react 完成自己的检查之后本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。，我再去修改真实 DOM，解决这个问题。

【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

简单总结，react 受控组件是一个大坑原创内容，盗版必究。转载请注明出处：www.tangshuang.net。

著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】原创内容，盗版必究。转载请注明出处：www.tangshuang.net