userRef 或 createRef 在功能组件中返回未定义答案

【问题标题】：userRef or createRef returning undefined in functional componentuserRef 或 createRef 在功能组件中返回未定义
【发布时间】：2019-12-20 22:03:52
【问题描述】：

我已经在这里阅读了很多答案，但它们都是潮类组件。

如果我有使用 useRef 或 createRef 的简单功能组件，则 ref.current 未定义我将它分配在 div 或 input 之上，但我无法获得它们的任何属性

Console.log() 仅在我使用独立的 console.log(ref) 时给我数据其他所有属性都是未定义的，例如console.log(ref.current)

import React, { useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const ref = useRef()
  console.log(ref.current) // undefined
  console.log(ref) // { current }

  return ( 
    <div className="App">
      <h1 ref={ref}>Hello CodeSandbox</h1>      
      {/* <input ref={ref} name="test" value="bla" /> */}
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

看看这个演示，看看控制台： https://codesandbox.io/s/fervent-kirch-soe8n

但即使在类组件中我也无法访问例如 ref.current.innerHTML： https://codesandbox.io/s/relaxed-beaver-ic1em

【问题讨论】：

因为const ref = useRef() ref 没有定义... const ref = useRef('something..') 然后你会在控制台上看到'something..'。添加这个：useEffect(() => { console.log(ref.current) });
是的，我刚刚弄明白了。谢谢

标签： reactjs

【解决方案1】：

好的，我发现问题出在哪里了。

如果我使用 useEffect() 或者如果我使用一些按钮处理程序，我可以访问元素：

useEffect(()=>{
    console.log(ref.current.innerHTML)
  })

在类组件中相同：

class App extends React.Component {
  myRef = React.createRef();

  componentDidMount(){
    console.log(this.myRef.current); // correct
  }

  render() {
    console.log(this.myRef.current); // null

    return <h2 ref={this.myRef}>Start editing to see some magic happen!</h2>
  }
}

或

<button onClick={()=> console.log(ref.current.innerHTML)}>Click</button>

【讨论】：

【解决方案2】：

你将 ref 赋予 dom 中的元素，所以你不能在它真正被渲染之前访问它，所以在组件生命周期中发生的反应中，这是 useEffect 或 componentDidMount。

import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const ref = useRef();
 useEffect(() => {
   console.log(ref.current)
 },[])

  return (
    <div className="App">
      <h1 ref={ref}>Hello CodeSandbox</h1>
      {/* <input ref={ref} name="test" value="bla" /> */}
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const Expander = forwardRef((_, ref) => {
  return <div ref={ref}>test</div>;
});

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：

【解决方案3】：

没有 ref 和 ref 和 useState 的方式

import React, { useRef, useEffect, useState } from "react";
import ReactDOM from "react-dom";

function app() {
  const ref = useRef('lalala');
  const [h1Text, setH1Text] = useState('Hello CodeSandbox');

  useEffect(() => { 
    console.log(ref.current)
   });

   const changeHeader = () =>{
    setH1Text('mamamama');
   }
   const changeHeader2 = (ev) =>{
    ev.target.innerHTML = "Hello CodeSandbox222222222222";
   }

  return (
    <div className="App">
      <h1 ref={ref} onClick={changeHeader}>{h1Text}</h1>
      <h2 onClick={changeHeader2}>Hello CodeSandbox2</h2>
    </div>
  );
}

以及输入 chagne 没有 refs 的 h1 的代码

function Example2() {
  const [h1Text, setH1Text] = useState('Hello CodeSandbox');

   const changeHeader = (ev) =>{
    setH1Text(ev.target.value);
   }

  return (
    <div className="App">
      <h1>{h1Text}</h1>
      <input onChange={changeHeader} name="test" />
    </div>
  );
}

【讨论】：