如何在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中与document.getElementById()等价的是document.querySelector()。

2022-01-29 21:10:38

其他回答

为了在react中获取元素，你需要使用ref，在函数中你可以使用ReactDOM。findDOMNode方法。

但我更喜欢做的是在比赛中呼叫裁判

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

这是一个很好的链接，可以帮助你弄清楚。

2016-06-29 08:19:14

在更新的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使用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

在类组件和功能组件中，您必须遵循两种不同的方法。

对于类组件 <input type="text" ref={ref => this。myTextInput = ref} />

看一下上面的代码。使用“ref”属性引用相关元素。然后，您将能够使用该引用引用该元素。在这个例子中，我可以使用“this”。myTextInput”指向上面的输入元素。

对于功能组件 const textInput = useRef(null)

使用"useRef"钩子，并将变量名设置为你想要引用的元素的"ref"属性的值(如下所示)。

<input type="text" ref={textInput} />

一个关于功能组件的例子。

import React, {useRef} from 'react'

function CustomTextInput(props) {
  // textInput must be declared here so the ref can refer to it
  const textInput = useRef(null);

  function handleClick() {
     textInput.current.focus();
  }

  return (
    <div>
     <input type="text" ref={textInput} />
    </div>
  );
}

想了解更多吗?给你

2022-07-15 04:12:32

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

2022-01-29 21:10:38

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

推荐文章

最新文章

标签