react如何操作引用页面的值
获取引用页面的值
在React中，可以通过useRef钩子或createRef方法创建引用（ref），用于直接访问DOM节点或React组件实例。以下为具体实现方式：
使用函数组件与useRef
import React, { useRef } from 'react';
function MyComponent() {
const inputRef = useRef(null);
const handleClick = () => {
console.log(inputRef.current.value); // 获取输入框的值
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleClick}>获取值</button>
</div>
);
}使用类组件与createRef
import React, { createRef } from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = createRef();
}
handleClick = () => {
console.log(this.inputRef.current.value); // 获取输入框的值
};
render() {
return (
<div>
<input ref={this.inputRef} type="text" />
<button onClick={this.handleClick}>获取值</button>
</div>
);
}
}传递Ref给子组件
若需操作子组件的DOM节点或方法，需使用forwardRef转发ref：
子组件（使用forwardRef）
const ChildComponent = React.forwardRef((props, ref) => {
return <input ref={ref} type="text" />;
});父组件
function ParentComponent() {
const childRef = useRef(null);
const handleClick = () => {
console.log(childRef.current.value); // 获取子组件输入框的值
};
return (
<div>
<ChildComponent ref={childRef} />
<button onClick={handleClick}>获取子组件值</button>
</div>
);
}回调Ref的使用
早期React版本或需要动态设置ref时，可使用回调形式的ref：
function CallbackRefExample() {
let textInput = null;
const setTextInputRef = (element) => {
textInput = element;
};
const handleClick = () => {
console.log(textInput.value); // 通过回调ref获取值
};
return (
<div>
<input ref={setTextInputRef} type="text" />
<button onClick={handleClick}>获取值</button>
</div>
);
}注意事项
- 避免过度使用ref，优先考虑通过props和状态管理数据。
- 函数组件需使用
forwardRef才能暴露ref给父组件。 - 在严格模式下，回调ref可能被调用两次（开发环境），需确保逻辑幂等性。
