[OHIF-Viewers]医疗数字阅片-医学影像-获取焦点的2种方式-ref

[OHIF-Viewers]医疗数字阅片-医学影像-获取焦点的2种方式-ref

前言
在React中,只要props或state发生改变,则render()方法必定执行,即DOM会更新。然React更新DOM时,可能会导致已经获取焦点的元素失去焦点,故此时需要操作DOM,获取焦点。

方式一:

React.createRef()
使用React.createRef()方法可以创建一个存储dom的ref,当ref设置在组件上时,即可存储该元素的dom引用。

// index.js
import React from 'react'
import CustomTextInput from './CustomTextInput'

class Parent extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个ref存储dom元素
    this.inputElement = React.createRef();
    this.getFocus = this.getFocus.bind(this)
  }

  getFocus() {
    this.inputElement.current.focus()
  }

  render() {
    return (
      <CustomTextInput
        inputRef={this.inputElement}
        inputGetFocus={this.getFocus}
      />
    )
  }
}

export default Parent
// CustomTextInput.js
import React from 'react'

const CustomTextInput = (props) => {
  return (
    <React.Fragment>
      <input
        type="text"
        ref={props.inputRef}
      />
      <button onClick={props.inputGetFocus}>获取焦点</button>
    </React.Fragment>
  )
}

export default CustomTextInput

方式二:使用函数

// index.js
import React from 'react'
import CustomTextInput from './CustomTextInput'

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.getInputElement = this.getInputElement.bind(this)
    this.getFocus = this.getFocus.bind(this)
  }

  getFocus() {
    this.inputElement.focus()
  }

  getInputElement(el) {
    this.inputElement = el
  }

  render() {
    return (
      <CustomTextInput
        inputRef={this.getInputElement}
        inputGetFocus={this.getFocus}
      />
    )
  }
}

export default Parent

 OHIF是酱紫实现的:

    <div className="ViewportDownloadForm" >
      <div
        style={{
          height: viewportElementDimensions.height,
          width: viewportElementDimensions.width,
          position: 'absolute',
          left: '9999px',
        }}
        ref={ref => setViewportElement(ref)}
      >

 

网名:浩秦;
邮箱:root#landv.pw;
博客:landv.cnblogs.com;
只要我能控制一個國家的貨幣發行,我不在乎誰制定法律。金錢一旦作響,壞話隨之戛然而止。
posted @ 2020-07-09 14:35  landv  阅读(274)  评论(0编辑  收藏  举报