react使用getElementById获取span里的文本内容
时间: 2024-05-10 07:17:49 浏览: 185
JS 获取span标签中的值的代码 支持ie与firefox
在 React 中,你可以使用 `ref` 属性来获取 DOM 元素,然后使用 `textContent` 属性来获取元素里的文本内容。
例如,假设你有一个以下的组件:
```jsx
function MyComponent() {
const myRef = React.useRef(null);
function handleClick() {
const spanText = myRef.current.textContent;
console.log(spanText);
}
return (
<div>
<span ref={myRef}>Some text</span>
<button onClick={handleClick}>Get text</button>
</div>
);
}
```
这里,我们使用 `useRef` 钩子创建了一个 `myRef` 引用,并将其传递给了 `<span>` 元素的 `ref` 属性。然后,在 `handleClick` 函数中,我们使用 `myRef.current.textContent` 来获取 `<span>` 元素里的文本内容。
当用户点击 "Get text" 按钮时,控制台就会输出 "Some text"。
阅读全文