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

765824 次浏览
小开

你可以通过指定ref

在react v16.8.0 with function component中，你可以用useRef定义一个ref。注意，当你在函数组件上指定一个ref时，你需要使用React。将引用转发给使用useImperativeHandle的DOM元素，以从函数组件中公开某些函数

例:

const Child1 = React.forwardRef((props, ref) => {
return <div ref={ref}>Child1</div>
});


const Child2 = React.forwardRef((props, ref) => {
const handleClick= () =>{};
useImperativeHandle(ref,() => ({
handleClick
}))
return <div>Child2</div>
});
const App = () => {
const child1 = useRef(null);
const child2 = useRef(null);


return (
<>
<Child1 ref={child1} />
<Child1 ref={child1} />
</>
)
}

编辑:

在反应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 for using React.createRef()

编辑

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

从文档中可以看出:

遗留API:字符串引用

如果你以前使用过React，你可能会 熟悉旧的API，其中ref属性是一个字符串，例如 textinput, DOM节点被访问为this.ref . textinput。我们 建议反对，因为字符串引用有一些问题，被考虑 遗留的，并且很可能在未来的版本中被删除。如果 你目前正在使用this.ref . 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也使用如下所示的字符串定义refs

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

等等……

小开
最佳答案

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

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

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

这是一个很好的链接来帮你算出来。

小开

你可以替换

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

与

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




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

由于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}
/>


);


}

｝

小开

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

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

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

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

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

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

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

小开

在我的例子中，我不能使用ref，因为元素位于许多子组件之间，我必须通过类和id而不是ref来访问它们。因此，使用useEffect钩子尝试没有用，因为它找不到元素:

useEffect(() => {
const el1 = document.querySelector('.el1')
const el2 = document.querySelector('.el2')
}, [])

元素是undefined，因为当它被安装时，子组件也不会在父组件之前被安装。

我所做的就是使用timeout:

useEffect(() => {
const timer = setTimeout(() => {
const el1 = document.querySelector('.el1')
const el2 = document.querySelector('.el2')
},500)
return () => {
clearTimeout(timer)
}
}, [])

现在，它运行得很好。它找到了DOM，我就可以操纵它们了。希望这能帮助到别人!

小开

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

小开

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

  1. 用于类组件

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

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

  1. 功能组件

    const textInput = useRef(null)

使用“;useRef"挂钩并将变量名设置为" refquot;要引用的元素的属性(如下所示)。

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

想了解更多吗?给你


提交答案