如何在 React 中访问 DOM 元素？ React 中 document.getElementById() 的等价物是什么

Question

如何 select react.js 中的某些柱状图？

这是我的代码：

var Progressbar = React.createClass({
    getInitialState: function () {
        return { completed: this.props.completed };
    },
    addPrecent: function (value) {
        this.props.completed += value;
        this.setState({ completed: this.props.completed });
    },

    render: function () {

        var completed = this.props.completed;
        if (completed < 0) { completed = 0 };


        return (...);
    }

我想使用这个 React 组件：

var App = React.createClass({
    getInitialState: function () {

        return { baction: 'Progress1' };
    },
    handleChange: function (e) {
        var value = e.target.value;
        console.log(value);
        this.setState({ baction: value });
    },
    handleClick10: function (e) {
        console.log('You clicked: ', this.state.baction);
        document.getElementById(this.state.baction).addPrecent(10);
    },
    render: function () {
        return (
            <div class="center">Progress Bars Demo
            <Progressbar completed={25} id="Progress1" />
                <h2 class="center"></h2>
                <Progressbar completed={50} id="Progress2" />
                <h2 class="center"></h2>
                <Progressbar completed={75} id="Progress3" />
                <h2 class="center"></h2>
                <span>
                    <select name='selectbar' id='selectbar' value={this.state.baction} onChange={this.handleChange}>
                        <option value="Progress1">#Progress1</option>
                        <option value="Progress2">#Progress2</option>
                        <option value="Progress3">#Progress3</option>
                    </select>
                    <input type="button" onClick={this.handleClick10} value="+10" />
                    <button>+25</button>
                    <button>-10</button>
                    <button>-25</button>
                </span>
            </div>
        )
    }
});

我想执行 handleClick10 函数并为我的 selected 进度条执行操作。但是我得到的结果是：

 You clicked:  Progress1
 TypeError: document.getElementById(...) is null

如何selectreact.js中的某个元素？

Answer 1

您可以通过指定 ref

编辑： 在带有函数组件的 react v16.8.0 中，您可以使用 useRef 定义一个 ref。请注意，当您在功能组件上指定 ref 时，您需要在其上使用 React.forwardRef 将 ref 转发到 DOM 元素，使用 useImperativeHandle 以从内部公开某些功能功能组件

例如：

const Child1 = React.forwardRef((props, ref) => {
    return <div ref={ref}>Child1</div> 
});

const Child2 = React.forwardRef((props, ref) => {
    const handleClick= () =>{};
    useImperativeHandle(ref,() => ({
       handleClick
    }))
    return <div>Child2</div> 
});
const App = () => {
    const child1 = useRef(null);
    const child2 = useRef(null);

    return (
        <>
           <Child1 ref={child1} />
           <Child1 ref={child1} />
        </>
    )
}

编辑：

在 React 16.3+ 中，使用 React.createRef() 创建你的 ref:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

为了访问元素，使用：

const node = this.myRef.current;

DOC for using React.createRef()

编辑

但是 facebook 建议不要这样做，因为字符串引用有一些问题，被认为是遗留的，并且可能会在未来的某个版本中被删除。

来自文档：

Legacy API: String Refs

If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like "textInput", and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases. If you're currently using this.refs.textInput to access refs, we recommend the callback pattern instead.

React 16.2 及更早版本 的推荐方法是使用回调模式：

<Progressbar completed={25} id="Progress1" ref={(input) => {this.Progress[0] = input }}/>

<h2 class="center"></h2>

<Progressbar completed={50} id="Progress2" ref={(input) => {this.Progress[1] = input }}/>

  <h2 class="center"></h2>

<Progressbar completed={75} id="Progress3" ref={(input) => {this.Progress[2] = input }}/>

DOC for using callback

甚至旧版本的 React 都使用如下字符串定义 refs

<Progressbar completed={25} id="Progress1" ref="Progress1"/>

    <h2 class="center"></h2>

    <Progressbar completed={50} id="Progress2" ref="Progress2"/>

      <h2 class="center"></h2>

    <Progressbar completed={75} id="Progress3" ref="Progress3"/>

为了得到元素只需要做

var object = this.refs.Progress1;

记得在箭头函数块中使用 this，例如：

print = () => {
  var object = this.refs.Progress1;  
}

等等...

Answer 2

要获取 react 中的元素，您需要使用 ref，在函数内部，您可以使用 ReactDOM.findDOMNode 方法。

但我更喜欢做的是在事件中直接调用 ref

<input type="text" ref={ref => this.myTextInput = ref} />

This is some good link帮你算算。

Answer 3

你可以替换

document.getElementById(this.state.baction).addPrecent(10);

和

this.refs[this.state.baction].addPrecent(10);


  <Progressbar completed={25} ref="Progress1" id="Progress1"/>

Answer 4

由于 React 使用 JSX 代码创建 HTML，我们不能使用 documment.querySelector 或 getElementById 等调节方法引用 dom。

相反，我们可以使用 React 引用系统来访问和操作 Dom，如下例所示：

constructor(props){

    super(props);
    this.imageRef = React.createRef(); // create react ref
}

componentDidMount(){

    **console.log(this.imageRef)** // acessing the attributes of img tag when dom loads
}


render = (props) => {

const {urls,description} = this.props.image;
    return (

            <img
             **ref = {this.imageRef} // assign the ref of img tag here**
             src = {urls.regular} 
             alt = {description}
             />

        );

}

}

Answer 5

免责声明：虽然最佳答案可能是更好的解决方案，但作为初学者，当您想要的只是非常简单的东西时，需要接受很多东西。这旨在更直接地回答您最初的问题“我如何 select React 中的某些元素”

我认为你问题中的困惑是因为你有 React components，你被传递给 id“Progress1”，“Progress2”等。我相信这不是设置 html 属性 'id'，但 React 组件属性。例如

class ProgressBar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            id: this.props.id    <--- ID set from <ProgressBar id="Progress1"/>
        }
    }        
}

如上面的一些答案所述，您绝对可以在 React 应用程序中使用 document.querySelector，但您必须清楚它是 selecting html 输出组件的渲染方法。因此，假设您的渲染输出如下所示：

render () {
    const id = this.state.id
    return (<div id={"progress-bar-" + id}></div>)
}

然后你可以在其他地方进行正常的 javascript querySelector 调用，如下所示：

let element = document.querySelector('#progress-bar-Progress1')

Answer 6

使用较新版本的 React，您可以通过这样的挂钩使用和操作 DOM：

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

const MyComponent = () => {
  const myContainer = useRef(null);
  
  useEffect(() => {
    console.log("myContainer..", myContainer.current);
  });

  return (
    <>
      <h1>Ref with react</h1>
      <div ref={myContainer}>I can use the DOM with react ref</div>
    </>
  );
};

export default MyComponent;

只要你想访问你的 DOM 元素，只需使用 myContainer

Answer 7

在我的例子中，我无法使用 ref，因为元素位于许多子组件之间，我必须通过 class 和 id 而不是 ref 来访问它们。所以，尝试使用 useEffect 钩子没有用，因为它找不到元素：

useEffect(() => {
  const el1 = document.querySelector('.el1')
  const el2 = document.querySelector('.el2')
}, [])

该元素是 undefined，因为当它被挂载时，子组件也不会在此父组件之前挂载。

所以，我所做的就是使用超时：

useEffect(() => {
  const timer = setTimeout(() => {
    const el1 = document.querySelector('.el1')
    const el2 = document.querySelector('.el2')
  },500)
  return () => {
    clearTimeout(timer)
  }
}, [])

现在，它运行良好。它找到了 DOM 并且我能够使用它们进行操作。希望，这对某人有帮助！

Answer 8

在 React 中 document.getElementById() 等价于 document.querySelector().

如何在 React 中访问 DOM 元素？ React 中 document.getElementById() 的等价物是什么

How to access a DOM element in React? What is the equilvalent of document.getElementById() in React

javascript

getelementbyid

reactjs