React之Refs
2018-07-09 本文已影响43人
PoWerfulHeart
一.Refs是什么
引用官方的话：
Refs 提供了一种访问在 render 方法中创建的 DOM 节点或 React 元素的方式。
二.为什么需要Refs
在常规的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改子元素，你需要用新的 props 去重新渲染子元素。然而，在少数情况下，你需要在常规数据流外强制修改子元素。被修改的子元素可以是 React 组件实例，或者是一个 DOM 元素。在这种情况下，React 提供了解决办法。
三.用例
1.第一种用法
String 类型的 Refs
这种使用方法是老版本的用法，当然在16.4.1更新后，明确说了该种方法的Refs存在问题，所以为了不给自己埋坑，建议不要使用这种方式。
class App extends Component{
constructor(props){
super(props);
this.state = {
value:""
};
}
componentDidMount() {
this.refs.myinput.focus();
}
render(){
var str = {
"width":220,
"textAlign":"center",
"margin":"auto"
}
return (
<div style={str}>
<input type="text" ref="myinput" />
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
这个例子，当在第一次渲染后，input将会获得焦点。
下面我们改写下例子，来介绍第二种用法：创建 Refs
class Child extends Component {
constructor(props) {
super(props);
this.state = {
text: '我是初始值'
};
}
subHandleClick(){
this.setState({text: '我被父组件调用了，改变了内容！'})
}
render(){
return(
<div>
{this.state.text}
</div>
)
}
}
class Parent extends Component {
constructor(props) {
super(props);
this.test = React.createRef();
}
handleClick(){
console.log(this.test.current);
this.test.current.subHandleClick();
}
render(){
return(
<div>
<input
type="button"
value="父组件调用子组件方法"
onClick={this.handleClick.bind(this)}
/>
<Child ref={this.test} />
</div>
)
}
}
ReactDOM.render(
<Parent/>,
document.getElementById('root')
);
这里说明一下refs值得类型：
首先ref的值取决于节点的类型:
- 当 ref 属性被用于一个普通的 HTML 元素时，React.createRef() 将接收底层 DOM 元素作为它的 current 属性以创建 ref
- 当 ref 属性被用于一个自定义类组件时，ref 对象将接收该组件已挂载的实例作为它的 current 。
- 你不能在函数式组件上使用 ref 属性，因为它们没有实例。
第三种：回调函数用法
- React 也支持另一种设置 ref 的方式，称为“回调 ref”，更加细致地控制何时 ref 被设置和解除。
- 不同于传递 createRef() 创建的 ref 属性，你会传递一个函数。这个函数接受 React 组件的实例或 HTML DOM 元素作为参数，以存储它们并使它们能被其他地方访问。
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = null;
this.setTextInputRef = element => {
this.textInput = element;
};
this.focusTextInput = () => {
// 直接使用原生 API 使 text 输入框获得焦点
if (this.textInput) this.textInput.focus();
};
}
componentDidMount() {
// 渲染后文本框自动获得焦点
this.focusTextInput();
}
render() {
// 使用 `ref` 的回调将 text 输入框的 DOM 节点存储到 React
// 实例上（比如 this.textInput）
return (
<div>
<input
type="text"
ref={this.setTextInputRef}
/>
<input
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
</div>
);
}
}
ReactDOM.render(
<CustomTextInput/>,
document.getElementById('root')
)
