如何在React中访问DOM元素？什么是React中document.getElementById（）的等效项

乐米亚2020-03-11

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

Tony西门古一2020/03/11 11:43:10

由于React使用JSX代码创建HTML，因此我们无法使用documment.querySelector或getElementById之类的调节方法来引用dom。

相反，我们可以使用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}
             />

        );

}

}

小卤蛋十三2020/03/11 11:43:10

您可以更换

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

通过

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


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

樱阳光Pro2020/03/11 11:43:10

用于获取元素react，你需要使用ref和函数内可以使用ReactDOM.findDOMNode的方法。

但是我想做的更多的是在事件内部调用ref

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

这是一个很好的链接，可以帮助您找出答案。

达蒙西里2020/03/11 11:43:10

您可以通过指定 ref

编辑：

在React 16.3+中，用于React.createRef()创建引用：

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

为了访问元素，请使用：

const node = this.myRef.current;

使用React.createRef（）的DOC

编辑

但是，facebook建议不要这样做，因为字符串引用存在一些问题，被认为是旧问题，并且很可能在将来的发行版中被删除。

从文档：

旧版API：字符串引用

如果您以前使用过React，那么您可能会熟悉一个较旧的API，其中ref属性是一个字符串，例如“ textInput”，并且可以通过this.refs.textInput访问DOM节点。我们建议不要这样做，因为字符串引用存在一些问题，被认为是旧问题，并且很可能在将来的发行版中删除。如果您当前正在使用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定义的引用都使用如下字符串

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

等等...

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer