react修改页面dom的两种办法
一：使用选择器：
1、引入react-dom
import ReactDom from 'react-dom'
2、给react节点设置id或类名等标识
<span id='tip'></span>
3、定义变量保存dom元素
const span=document.getElementById('tip')
4、通过ReactDom的findDOMNode()方法修改dom的属性
ReactDom.findDOMNode(span).style.color='red'
点击时： e.currentTarget 获取到点击的dom,通过改变样式或者innerHtml改变dom
二：使用ref属性
1、给指定标签设置ref属性
<span ref='tip'></span>
2、通过this.refs.ref属性值来修改标签的属性
this.refs.tip.style.color = "red"
class组件
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef(); }
render() {
return <div ref={this.myRef} />; }
}
函数组件使用
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` 指向已挂载到 DOM 上的文本输入元素
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
