Article directory
1. Problem
Use ref directly in react and report an error:
react can not set ref string for ...
2. Solve
1.React.createRef()
constructor() {
super();
this.refObj = React.createRef()
}
let refDom = this.refObj.current
let refDomValue = this.refObj.current.value
<div ref={
this.refObj }>
2.Callback function
constructor() {
super();
this.refObj = null;
this.setRefObj = refObj =>{
this.refObj = refObj ;
}
}
let refDom = this.refObj.value
<div ref={this.setRefObj } ></div>
3. Extend learning
1.React.refs
Refs provide a way to access DOM nodes or React elements created in the render method.
Refs are a very special property that you can use to bind to any component output by render(). This special property allows you to reference the corresponding backing instance returned by render(). This ensures that the correct instance is always available at any time .
Application scenarios:
- Manage focus, text selection or media playback.
- Trigger forced animation.
- Integrate third-party DOM libraries.
(1)Create Refs
React.createRef()
React 16.3 version introduces React.createRef() API
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={
this.myRef} />;
}
}
Creating Refs is divided into two steps:
- Declare refs through the API in the constructor
React.createRef()and set it as an instance property of the entire component so that it can be used throughout the component or even passed out. - Bind DOM elements in the render function
(2)Access Refs
const node = this.myRef.current;
The value of ref varies depending on the type of DOM node it is bound to:
- When the ref attribute is used on a native DOM element, the ref created using React.createRef() in the constructor receives the underlying DOM element as its current attribute.
- When the ref attribute is used for a custom class component, the ref object receives the component's mounted instance (the instantiated component ) as its current property.
Notice:
- You cannot use the ref attribute on a function component because function components have no instances
- Add ref to DOM element
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput() {
// 直接使用原生 API 使 text 输入框获得焦点
this.textInput.current.focus();
}
render() {
return (
<div>
<input type="text" ref={
this.textInput} />
<input type="button" value="Focus the text input" onClick={
this.focusTextInput}
/>
</div>
);
}
}
- Add Ref to class component
class AutoFocusTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
componentDidMount() {
// 这里在父组件加载时，自动调用子组件中的方法，使 text 输入框获得焦点
this.textInput.current.focusTextInput();
}
render() {
return (
<CustomTextInput ref={
this.textInput} />
);
}
}
Some of the above descriptions and cases come from: Refs and the DOM – React
How to use versions before react 16.3: