javascript - 如何将 DOM 元素从 componentDidMount() 传递到另一个文件中定义的另一个函数？

Question

我在另一个文件中有一个函数说ABC()，我需要将一些 DOM 元素传递给该函数。但是，如果将 DOM 元素存储在另一个变量中，比如node，然后将其传递给ABC()或者直接将其传递给ABC()，那么在这两种情况下，[object HTMLDivElement]都会作为值存储/传递给ABC()函数.

这是我的 ABC.js 文件。

export function ABC(inputRef) {
  console.log(inputRef);        // prints [object HTMLDivElement]
  // do something
}

这是我的反应文件 XYZ.js。

import React from 'react'; 
import {ABC} from './ABC.js';
 
class PrimePage extends React.Component {

  constructor (props) {
    super(props);
    this.textInputRef = null;
    this.submitBtnRef = null;
  }

  componentDidMount() {
    this.submitBtnRef.addEventListener('click', (event) => {
      console.log(this.textInputRef);  // prints <input type="text" id="input-check"> which I need to pass
      let node = this.textInputRef;
      console.log(node);               // prints [object HTMLDivElement]
      ABC(this.textInputRef); 
      ABC(node);
    })
  }
  render() {
    return (
      <div> 
        <input type="text" id="input-check" ref={(input) => { this.textInputRef = 
        input; }}>
        <button type="submit" id="submit-btn" ref={(input) => { 
        this.submitBtnRef = input; }}>Submit</button>
      </div>
    );
  }

}

我想要一种可以将 DOM 元素传递给ABC()函数的方法。基本上我需要一个类似document.getElementById("id")的功能，以便我可以使用ABC.js 文件中ABC()函数内的innerHTML属性来操作 HTML。

标签： javascriptreactjs