如何从 React 中的父组件调用 onChange 访问内部虚拟 DOM 元素

大佬教程收集整理的这篇文章主要介绍了如何从 React 中的父组件调用 onChange 访问内部虚拟 DOM 元素，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何从 React 中的父组件调用 onChange 访问内部虚拟 DOM 元素？

开发过程中遇到如何从 React 中的父组件调用 onChange 访问内部虚拟 DOM 元素的问题如何解决？下面主要结合日常开发的经验，给出你关于如何从 React 中的父组件调用 onChange 访问内部虚拟 DOM 元素的解决方法建议，希望对你解决如何从 React 中的父组件调用 onChange 访问内部虚拟 DOM 元素有所启发或帮助；

考虑以下示例：

const childComponent = ({funcFromParent}) => {

  const funcFromChild = (E) => {
    funcFromParent(E)
  }

  return (
    <>
      <h1>ChildComponent</h1>

      <div classname="myCooldiv" onChange={funcFromChilD}>
        <div classname="myCooldivTwo">
          <input type="text" classname="myCoolinput"/>
        </div>
      </div>
    </>
  );
};
@H_197_7@
那么，当我收到从 funcFromParent 返回到我的 ParentComponent 的调用时，我应该如何访问内部 DOM 属性？我的意思是，我知道 React 中有一个虚拟 DOM 等等，但是有没有任何标准化/实用的方法不被认为是访问的坏习惯，比如 @H_437_5@myCoolinput？
谢谢！
     
解决方法
你应该像这样使用 useRef 钩子：
const inputRef = useRef();

return (
    <input ref={inputRef} type="text" />
);
@H_197_7@
现在，可以通过 inputRef.current 访问对输入的引用 - 您可以将其向上传递到树中。
可以在Here找到更多信息。
      ,
        
事件的 currentTarget 属性是设置事件处理程序的元素的实际 DOM 子树。您可以使用标准 DOM 方法访问子树中的任何元素。例如，获取输入：



const childComponent = ({funcFromParent}) => {
  const funcFromChild = (E) => {
    funcFromParent(e.currentTarget)
  }

  return (
    <div>
      <h1>ChildComponent</h1>

      <div className="myCoolDiv" onChange={funcFromChilD}>
        <div className="myCoolDivTwo">
          <input type="text" className="myCoolInput"/>
        </div>
      </div>
    </div>
  );
};

const ParentComponent = () => {
  const func = currentTarget => {
    const input = currentTarget.querySELEctor('input')
    console.log(input && input.value)
  }
  
  return <ChildComponent funcFromParent={func} />
};

ReactDOm.render(
  <ParentComponent />,root
);@H_197_7@
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>@H_197_7@



然而，将实际的 DOM 子树传递给父级会破坏组件的封装。最好在输入上设置事件处理程序，并只传递值：



const childComponent = ({funcFromParent}) => {
  const funcFromChild = e => {
    funcFromParent(e.target.value)
  }

  return (
    <div>
      <h1>ChildComponent</h1>

      <div className="myCoolDiv" onChange={funcFromChilD}>
        <div className="myCoolDivTwo">
          <input type="text" className="myCoolInput"/>
        </div>
      </div>
    </div>
  );
};

const ParentComponent = () => {
  const func = value => {
    console.log(value)
  }
  
  return <ChildComponent funcFromParent={func} />
};

ReactDOm.render(
  <ParentComponent />,root
);@H_197_7@
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>@H_197_7@


 


 
 
      
大佬总结
       
以上是大佬教程为你收集整理的如何从 React 中的父组件调用 onChange 访问内部虚拟 DOM 元素全部内容，希望文章能够帮你解决如何从 React 中的父组件调用 onChange 访问内部虚拟 DOM 元素所遇到的程序开发问题。
		
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
		
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。