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

我如何在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函数，并对所选的进度条执行操作。但我得到的结果是

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

如何在react.js中选择特定的元素?

当前回答

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

我认为你的问题中的困惑是因为你有React组件，你正在传递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"/>
        }
    }        
}

正如上面提到的一些答案，你绝对可以使用document。querySelector在你的React应用程序内部，但你必须清楚，它是选择html输出组件的渲染方法。假设你的渲染输出是这样的:

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

然后你可以在其他地方做一个正常的javascript querySelector调用，像这样:

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

2021-02-06 17:29:18

其他回答

React中与document.getElementById()等价的是document.querySelector()。

2022-01-29 21:10:38

由于React使用JSX代码创建HTML，我们不能使用document之类的规则方法引用dom。querySelector或getElementById。

相反，我们可以使用React ref系统访问和操作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}
             />

        );

}

}

2019-10-12 08:22:08

你可以替换

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

with

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


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

2016-06-29 08:20:58

我认为你的问题中的困惑是因为你有React组件，你正在传递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"/>
        }
    }        
}

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

然后你可以在其他地方做一个正常的javascript querySelector调用，像这样:

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

2021-02-06 17:29:18

在更新的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.current

2021-04-13 22:47:19

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

推荐文章

最新文章

标签