react中如何获取结点内容

获取DOM节点内容的方法

在React中获取DOM节点内容通常通过ref实现，以下是几种常见方式：

使用useRef Hook（函数组件）

import { useRef } from 'react';

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

  const handleClick = () => {
    console.log(divRef.current.textContent); // 获取文本内容
    console.log(divRef.current.innerHTML); // 获取HTML内容
  };

  return (
    <div ref={divRef} onClick={handleClick}>
      需要获取的内容
    </div>
  );
}

使用createRef（类组件）

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

  handleClick = () => {
    console.log(this.divRef.current.textContent);
  };

  render() {
    return (
      <div ref={this.divRef} onClick={this.handleClick}>
        类组件内容
      </div>
    );
  }
}

使用回调refs

function MyComponent() {
  let divRef = null;

  const handleClick = () => {
    console.log(divRef.textContent);
  };

  return (
    <div ref={node => divRef = node} onClick={handleClick}>
      回调ref内容
    </div>
  );
}

通过事件对象获取

function MyComponent() {
  const handleClick = (e) => {
    console.log(e.target.textContent);
    console.log(e.currentTarget.innerHTML);
  };

  return (
    <div onClick={handleClick}>
      点击获取内容
    </div>
  );
}

注意事项

• 避免过度使用ref，优先考虑React的状态管理
• ref.current可能在初始渲染时为null
• 对于表单元素，通常使用value属性而非ref获取值