ref
ref 可以理解为指向React 元素的变量,方便其他组件访问这个React元素。
通过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} />);
}
}
通过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} />
);
}
}
// 错误案例:
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} />
);
}
}
函数组件使用 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>
);
}
通过 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>;
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} />);
}
}
增加上面代码到脚本标签下,然后复制到 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>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。