实现点击按钮获取输入框内容的案例

(1)字符串形式的ref

202110181634550270137422

这里获取输入框内容是使用原生js,比较繁琐

我们可以将id改为ref,这时候我们打印Demo实例对象进行查看

202110181634550301117315

202110181634550307799670

拿数据:

202110181634550319871759

(2)内联函数与回调函数形式的ref

内联
把ref当前所处的节点input挂载到组件的实例对象上,并且取名字叫input1

202110181634550326721354

可简写为

202110181634550337107682

总体:

202110181634550351974454

回调函数的ref在数据更新时回调用两次render函数(即setState),第一次为null,第二次才是节点内容

202110181634550363192623

控制台:在点击事件触发后

202110181634550375210239

2、回调函数的ref可以避免多次调用render

202110181634550382184221

(3)createRef

react的官方方法,React.creatRef:React.creatRef调用后可以返回一个容器,这个容器可以存储被ref所表示的节点,该容器是“专人专用”的,即一个容器只能存一个ref

202110181634550395361758

注意:拿值的时候,myRef必须添加current

event.target也可以完成默写函数,可以省略ref

202110181634550405126871