记录一下react input(text)中文输入的问题

使用react重写了一套表单组件，从15升级到最新的17，使用function component替换之前一直使用的class component。

错误现象

文本框表单中中英文切换输入，使用英文输入没有问题，但切换到中文输入时，输入法提示框闪退，导致中文输入失败

源码示例

错误源码如下

import React from "react";

function MyInput(props) {
  let myProps = Object.assign({}, props);
  const [p, setP] = React.useState(myProps);
  
  function onChange(e) {
    myProps.value = e.target.value;
    setP(myProps);
  }

  return <input type="text" value={p.value} onChange={onChange} />;
}

export default function App() {
  return (
    <div className="App">
      <MyInput value="你好呀2" />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

正确源码如下

import React from "react";

function MyInput(props) {
  let myProps = Object.assign({}, props);
  if (myProps.value) {
    myProps.defaultValue = myProps.value || "";
    delete myProps.value;
  }

  const [p, setP] = React.useState(myProps);

  function onChange(e) {
    myProps.value = e.target.value;
    setP(myProps);
  }

  return (
    <input type="text" defaultValue={p.defaultValue} onChange={onChange} />
  );
}

export default function App() {
  return (
    <div className="App">
      <MyInput value="你好呀2" />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

错误原因

使用defaultValue代替value是问题的关键，当onChange监控value值时不能输入中文，但defaultValue不会，不懂为什么，反正就是解决了，希望哪位大神可以解释一下。

其他方案

查看网上的其它方案，都是比较远古的一些解决方案，使用compositionstart/end，使用class component。返现并不适用于function component，在fc中亲测无效，compositionend事件在react组件中不能响应