如何在 React 中访问 DOM 元素?React 中 document.getElementById() 的等价物是什么 [英] How to access a DOM element in React? What is the equilvalent of document.getElementById() in React

问题描述

如何在 react.js 中选择某些栏?

这是我的代码:

var Progressbar = React.createClass({getInitialState: 函数 () {返回 { 完成:this.props.completed };},addPrecent:函数(值){this.props.completed += 值；this.setState({ 完成: this.props.completed });},渲染:函数(){var完成 = this.props.completed;如果(已完成 <0){ 已完成 = 0 };返回 (...);}

我想使用这个 React 组件:

var App = React.createClass({getInitialState: 函数 () {返回 { baction: 'Progress1' };},handleChange:函数(e){var 值 = e.target.value;控制台日志(值)；this.setState({ baction: value });},handleClick10:函数(e){console.log('你点击了:', this.state.baction);document.getElementById(this.state.baction).addPrecent(10);},渲染:函数(){返回 (<div class="center">进度条演示<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><跨度><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></选择><input type="button" onClick={this.handleClick10} value="+10"/><按钮>+25</按钮><按钮>-10</按钮><按钮>-25</按钮></span>

)}});

我想执行handleClick10函数并对我选择的进度条执行操作.但我得到的结果是:

 您点击了:Progress1类型错误:document.getElementById(...) 为空

如何在 react.js 中选择某个元素?

解决方案

就我而言，我无法使用 ref 因为元素位于许多子组件之间，我必须访问它们通过类和 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)返回 () =>{清除超时(计时器)}}, [])

现在，它运行良好.它找到了 DOM，我可以用它们进行操作.希望，这对某人有所帮助！

How do I select certain bars in react.js?

This is my code:

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 (...);
    }

I want to use this React component:

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>
        )
    }
});

I want to execute the handleClick10 function and perform the operation for my selected progressbar. But the result I get is:

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

How do I select the certain Element in react.js?

解决方案

In my case, I wasn't able to use ref because elements were somewhere between many child components and I have to access them by class and id instead of ref. So, trying with useEffect hook didn't work as it can't find the element:

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

The element is undefined because when it is mounted the children components also doesn't mounted before this parent component.

So, what I did is to use timeout:

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

Now, it worked fine. It found the DOM and I was able to manipulate with them. Hope, this helps someone!

这篇关于如何在 React 中访问 DOM 元素?React 中 document.getElementById() 的等价物是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！