详解React中如何获取真实的dom

import React, { useRef } from 'react';

function MyComponent() {
  // 创建一个 ref 来引用 DOM 元素
  const inputRef = useRef(null);

  const focusInput = () => {
    // 通过 ref 访问真实的 DOM 元素，并给它添加焦点
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

export default MyComponent;

import React, { Component } from 'react';

class MyComponent extends Component {
  // 在类组件中创建 ref
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  focusInput = () => {
    // 通过 ref 访问真实的 DOM 元素，并给它添加焦点
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.focusInput}>Focus the input</button>
      </div>
    );
  }
}

export default MyComponent;

function MyComponent() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    alert(`Input value: ${inputRef.current.value}`);
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

import React, { Component } from 'react';

class MyButton extends Component {
  clickHandler() {
    alert('Button clicked!');
  }

  render() {
    return <button onClick={this.clickHandler}>Click Me</button>;
  }
}

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

  triggerButtonClick = () => {
    this.buttonRef.current.clickHandler(); // 调用子组件的方法
  };

  render() {
    return (
      <div>
        <MyButton ref={this.buttonRef} />
        <button onClick={this.triggerButtonClick}>Trigger Child Button Click</button>
      </div>
    );
  }
}

export default ParentComponent;