Reactjs 如何使用react钩子构建非受控组件？

如何将此非受控组件转换为反应挂钩（并避免输入字段的多重渲染）：

类MyForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.input=React.createRef（）；
}
render（）{
const{onInputChanged}=this.props；
返回(
);
}
}

查看

useRef

hook:

如果要将组件转换为功能组件并使用hook，可以通过以下方式执行：

import React, { useRef,useEffect } from 'react';

useEffect(() => {

},['the props you write here will trigger the re-render when they change'])
const MyForm = (props) => {
  const input = useRef(null);
  return (
    <form>
      <input type="text" ref={input} onChange={props.onInputChanged} />
    </form>
  );
}

export default MyForm;

import React，{useRef，useffect}来自“React”；
useffect（（）=>{
}，[“您在此处编写的道具在更改时将触发重新渲染”]）
常量MyForm=（道具）=>{
常量输入=useRef（null）；
返回(
);
}
导出默认MyForm；

导入React，{useRef}来自“React”；
导出常量MyForm=（道具）=>{
常量输入=useRef（null）；
返回(
);
}

您为什么不看看一些带有挂钩的功能组件的示例并尝试一下呢。那么，如果你被困住了，就寻求帮助？这不是一个“我怎么做”的问题，这是一个“为我做”的请求。我认为这是一个很好的例子，说明了如何在react钩子中编写非受控组件。请不要只发布代码作为答案，而是说明您的代码做了什么以及它如何解决问题。带有解释的答案通常质量更高，更容易吸引选票。

import React, { useRef,useEffect } from 'react';

useEffect(() => {

},['the props you write here will trigger the re-render when they change'])
const MyForm = (props) => {
  const input = useRef(null);
  return (
    <form>
      <input type="text" ref={input} onChange={props.onInputChanged} />
    </form>
  );
}

export default MyForm;

import React, { useRef } from 'react';

export const MyForm = (props) => {
  const input = useRef(null);
  return (
    <form>
      <input type="text" ref={input} onChange={props.onInputChanged} />
    </form>
  );
}