一、什么是 ref
ref 可以理解为指向React 元素的变量，方便其他组件访问这个React元素。
二、class组件使用ref
1、createRef : class组件
通过ref ，访问class组件。
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.state = { text: "" };
}
setTextInput(text) {
this.setState({ text: text });
}
render() {
return (<input type="text" value={this.state.text} onChange={() => { }} />);
}
}
class SetTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
componentDidMount() {
this.textInput.current.setTextInput("测试");
}
render() {
return (<CustomTextInput ref={this.textInput} />);
}
}
2、createRef : dom元素
通过ref，访问React元素。
// 使用 ref 调用 input 元素的 focus 方法
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
// 1、创建 ref
this.textInput = React.createRef();
}
// 3、使用 ref 访问元素
componentDidMount() {
this.textInput.current.focus();
}
// 2、将元素的 ref属性 与 创建的ref 进行关联
render() {
return (
<input type="text" ref={this.textInput} />
);
}
}
三、函数组件中使用ref
1、无法使用 ref 属性
// 错误案例：
function MyFunctionComponent() {
return <input />;
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
render() {
// This will *not* work!
return (
<MyFunctionComponent ref={this.textInput} />
);
}
}
2、useRef
函数组件使用 useRef 来访问React元素。
function CustomTextInput(props) {
const textInput = React.useRef(null);
function handleClick() {
textInput.current.focus();
}
return (
<div>
<input
type="text"
ref={textInput} />
<input
type="button"
value="Focus the text input"
onClick={handleClick}
/>
</div>
);
}
3、forwardRef
通过 forwardRef 可以转发ref，访问组件的子元素。
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// 可以直接获取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
四、其他方式访问元素
1、通过回调
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = null;
this.focusTextInput = () => {
if (this.textInput) this.textInput.focus();
};
}
componentDidMount() {
this.focusTextInput();
}
render() {
return (
<input type="text" ref={element => this.textInput = element} />
);
}
}
2、通过 props 属性
function CustomTextInput(props) {
return (<input ref={props.inputRef} />);
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.inputElement = null;
this.focusTextInput = () => {
if (this.inputElement) this.inputElement.focus();
};
}
componentDidMount() {
this.focusTextInput();
}
render() {
return (<CustomTextInput inputRef={el => this.inputElement = el} />);
}
}
五、通过HTML直接查看上面示例效果的方式
增加上面代码到脚本标签下，然后复制到 index.html ，用浏览器打开即可看到效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>DOM元素使用ref</title>
<!-- 第一步：加载开发版本的React -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 部署时，请用下面链接替代上面 -->
<!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->
<!-- 第二步：加载开发版本的babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 这里增加代码
ReactDOM.render(<MyCompent />, document.getElementById('root'));
</script>
</body>
</html>
