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

问题描述

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

How do I select certain bars in 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组件：

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

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

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

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

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

推荐答案

你可以通过指定 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;

请记住在箭头功能中使用此阻止如：

Remember to use this inside an arrow function block like:

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

依此类推......

and so on...

编辑

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

However facebook advises against it because string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases.

来自文档：

旧版API：字符串参考

如果您之前使用过React，那么您可能需要熟悉旧API的
，其中ref属性是一个字符串，例如
textInput，DOM节点作为this.refs.textInput访问。我们b $ b建议反对它，因为字符串引用有一些问题，被认为是
遗留，并且很可能在未来的一个版本中删除。如果
你当前正在使用this.refs.textInput访问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及更早版的推荐方法是使用回调模式：

A recommended way for React 16.2 and earlier is to use the callback pattern:

<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：

In React 16.3+, use React.createRef() to create your 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（）

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