如何在react中访问dom元素的当前值？

import React, { createRef } from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = createRef();
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.myRef} />
        <button onClick={this.handleClick}>获取值</button>
      </div>
    );
  }

  handleClick = () => {
    const value = this.myRef.current.value;
    console.log(value);
  };
}

export default MyComponent;

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

const MyComponent = () => {
  const myRef = useRef(null);

  useEffect(() => {
    const value = myRef.current.textContent;
    console.log(value);
  }, []);

  return (
    <div ref={myRef}>
      这是一个DOM元素
    </div>
  );
}

export default MyComponent;