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

Question

如何在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中选择某个元素？

Answer 1

您可以通过指定 ref

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

等等...

编辑

然而,facebook建议反对它,因为字符串引用有一些问题,被认为是遗留的,并且很可能在未来的版本中被删除.

来自文档:

旧版API:字符串引用

如果您之前使用过React,那么您可能熟悉旧的API,其中ref属性是一个字符串,如"textInput",DOM节点作为this.refs.textInput访问.我们建议不要使用它,因为字符串引用有一些问题,被认为是遗留问题,很可能会在未来的某个版本中删除.如果您当前正在使用this.refs.textInput访问引用,我们建议使用回调模式.

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

在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使用React.createRef()

Answer 2

要获取元素,react您需要使用ref并在函数内部使用该ReactDOM.findDOMNode方法.

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

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

这是一些很好的链接,可以帮助您弄清楚.

https://facebook.github.io/react/docs/refs-and-the-dom.html

Answer 3

在较新版本的 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 4

您可以更换

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

通过

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


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

Answer 5

免责声明：虽然最重要的答案可能是一个更好的解决方案，但作为初学者，当您想要的只是非常简单的东西时，需要考虑很多事情。这是对您最初的问题“如何在 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')