PL
React - jak pobrać referencję do elementu div
0 points
W tym artykule chcielibyśmy pokazać, jak uzyskać referencję do elementu div w Reakcie.
W poniższym przykładzie tworzymy referencję za pomocą hooka React.useRef, następnie przypisujemy ją do właściwości ref elementu div.
Teraz, aby uzyskać dostęp do referencji elementu DOM, możemy użyć właściwości divRef.current, a dostęp do wartości jaka się tam aktualnie znajduje uzyskamy dzięki divRef.current.value.
xxxxxxxxxx1
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const divStyle = {6
height: '20px',7
background: 'yellow',8
border: 'solid',9
borderColor: 'red'10
};11
12
const App = () => {13
const divRef = React.useRef();14
return (15
<div>16
<div ref={divRef} style={divStyle}>17
<b>My div</b>18
</div>19
<br />20
<button onClick={() => console.log(divRef.current)}>Sprawdź referencję</button>21
<button onClick={() => console.log(divRef.current.innerText)}>Check innerText</button>22
<button onClick={() => console.log(divRef.current.innerHTML)}>Check innerHTML</button>23
<button onClick={() => console.log(divRef.current.outerHTML)}>Check outerHTML</button>24
</div>25
);26
}27
28
const root = document.querySelector('#root');29
ReactDOM.render(<App />, root);