关于react.js:React的ref是怎样调用其他元素

59次阅读

共计 3101 个字符，预计需要花费 8 分钟才能阅读完成。

一、什么是 `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>

六、参考链接

React 的 ref 是怎么调用其余元素？

正文完

react.js

发表至： react.js

2021-11-28

0

关于react.js:react源码解析5jsx核心api

关于react.js:Hologres助力飞猪双11实时数据大屏秒级响应

关于react.js:基于-React-ReduxMobx-搞定复杂项目状态管理一起学习

关于react.js:前端生成pdf

关于php:37-安卓手机存在监听隐患小米起诉博主索赔-100-万被驳回PHP-810-发布-思否周刊

	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} />);
	}
	}

	// 应用 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} />
	);
	}
	}

	// 谬误案例：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} />
	);
	}
	}

	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>
	);
	}

	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>;

	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} />
	);
	}
	}

	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} />);
	}
	}

	<!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>