asp.net答辩做网站,wordpress创建主题,制作简单的个人网站,企业网站建设实战教程目录 受控组件非受控组件基于ref获取DOM元素1、在标签中使用2、在组件中使用 受控组件
表单元素的状态#xff08;值#xff09;由 React 组件的 state 完全控制。组件的 state 保存了表单元素的值#xff0c;并且每次用户输入时#xff0c;React 通过事件处理程序来更新 … 目录 受控组件非受控组件基于ref获取DOM元素1、在标签中使用2、在组件中使用 受控组件
表单元素的状态值由 React 组件的 state 完全控制。组件的 state 保存了表单元素的值并且每次用户输入时React 通过事件处理程序来更新 state从更改视图「推荐」。
非受控组件
基于ref获取DOM元素我们操作DOM元素来实现需求和效果「偶尔」。
基于ref获取DOM元素
1、在标签中使用
1refxxx「 16.3 版本以后已经不推荐使用」 给需要的元素设置refxxx基于this.refs.xxx获取相应的DOM但是在React.StrictMode模式下会报错
//使用h2 reftitleBox.../h2//获取this.refs.titleBox2把ref设置成函数
x是形参存储当前的DOM元素获取DOM元素的x直接挂在实例的某个属性
//使用
ref{xthis.xxx x}
//获取
this.xxx3基于React.createRef方法创建一个ref对象 React.createRef() 在类组件中创建对 DOM 元素或其他组件实例的引用可以直接访问或操作 DOM 元素
this.xxx React.createRef(); // this.xxx {current:null}//使用
ref{ref对象(this.xxx)}
//获取
this.xxx.current全部代码如下
class Demo extends React.Component {box3 React.createRef(); //this.box3xxxrender() {return divh2 classNametitle reftitleBox温馨提示/h2h2 classNametitle ref{x this.box2 x}友情提示/h2h2 classNametitle ref{this.box3}郑重提示/h2/div;}componentDidMount() {// 第一次渲染完毕「virtualDOM已经变为真实DOM」此时我们可以获取需要操作的DOM元素console.log(this.refs);//{titleBox: h2.title}console.log(this.box2);//h2 classtitle友情提示/h2console.log(this.box3);//{current: h2.title}}
}原理 在render渲染的时候会获取virtualDOM的ref属性
如果属性值是一个字符串则会给this.refs增加这样的一个成员成员值就是当前的DOM元素如果属性值是一个函数则会把函数执行把当前DOM元素传递给这个函数「x-DOM元素」,而在函数执行的内部一般都会把DOM元素直接挂在到实例的某个属性上如果属性值是一个REF对象则会把DOM元素赋值给对象的current属性
2、在组件中使用
给元素标签设置ref目的获取对应的DOM元素给类组件设置ref目的获取当前调用组件创建的实例「后续可以根据实例获取子组件中的相关信息」给函数组件设置ref直接报错Function components cannot be given refs. Attempts to access this ref will fail. 但是我们让其配合 React.forwardRef 实现ref的转发目的获取函数子组件内部的某个元素
React.forwardRef 用法forwardRef 接受一个函数作为参数这个函数有两个参数props 和 ref。ref 会被传递给子组件的某个 DOM 元素或者其他组件实例。
class Child1 extends React.Component {state {x: 100,y: 200};render() {return div子组件1em ref{x this.emBox x}100/em/div;}
}const Child2 React.forwardRef(function Child2(props, ref) {// console.log(ref); //我们调用Child2的时候设置的ref属性值「函数」 //打印的结果为 x this.child2 xreturn div子组件2button ref{ref}按钮/button/div;
});class Demo extends React.Component {render() {return divChild1 ref{x this.child1 x} /Child2 ref{x this.child2 x} //div;}componentDidMount() { console.log(this.child1); //存储的是:子组件的实例对象console.log(this.child2); //存储的是:子组件内部的button按钮}
}组件Demo 中打印的this.child1this.child2如下
