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

在React中访问DOM元素的当前值，可以通过使用ref来获取元素的引用，并使用ref.current.value来获取其值。

首先，在React组件中定义一个ref，可以通过createRef()函数创建一个ref对象，如下所示：

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;

上述代码中，通过createRef()函数创建了一个名为myRef的ref对象，并在<input>元素中使用ref={this.myRef}将ref绑定到该输入框上。在点击按钮的handleClick方法中，可以通过this.myRef.current.value获取输入框的当前值。

这种方法适用于访问表单元素的值，例如文本框、复选框、单选按钮等。

如果要访问非表单元素的值，比如div或其他自定义组件，可以使用ref和useEffect钩子配合，具体操作如下所示：

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;

上述代码中，使用useRef(null)创建了一个ref对象，并在<div>元素中使用ref={myRef}将ref绑定到该div上。然后，使用useEffect钩子监测组件的挂载完成，并在回调函数中通过myRef.current.textContent获取div元素的当前内容。

需要注意的是，通过ref来访问DOM元素是直接操作DOM的一种方式，在React中应该尽量避免直接操作DOM，而是通过使用state和props来管理组件的状态和数据。