标签：bsp hand 组件 this bind OLE 实例 挂载 react
官方:Refs 提供了一种方式，用于访问在 render 方法中创建的 DOM 节点或 React 元素。
16.3版本-Refs
使用方式:
1.首先使用React.createRef()创建refs
2.使用ref属性获取React元素(一般赋予在虚拟DOM上);
设置Refs
class MyComponent extends React.Component{ constructor(props){ super(props); this.ele = React.createRef(); this.showRef=this.showRef.bind(this); } showRef(){ console.log(‘访问refs中的值‘,this.ele.current) } render(){ return ( <div> <input type="text" ref={this.ele} onChange={this.showRef}></input> </div> ) } }
// {current:input} input 是DOM元素
访问Refs
官方:const node = this.myRef.current;
ref的值取决于节点的类型:
ref 属性被用于一个普通的 HTML 元素时，React.createRef() 将接收底层 DOM 元素作为它的 current 属性以创建 ref 。ref 属性被用于一个自定义类组件时，ref 对象将接收该组件已挂载的实例作为它的 current 。ref 属性，因为它们没有实例普通的HTML元素:
class CustomTextInput extends React.Component { constructor(props) { super(props); // 创建 ref 存储 textInput DOM 元素 this.textInput = React.createRef(); this.focusTextInput = this.focusTextInput.bind(this); } focusTextInput() { // 直接使用原生 API 使 text 输入框获得焦点 // 注意：通过 "current" 取得 DOM 节点 this.textInput.current.focus(); } render() { // 告诉 React 我们想把 <input> ref 关联到构造器里创建的 `textInput` 上 return ( <div> <input type="text" ref={this.textInput} /> <input type="button" value="Focus the text input" onClick={this.focusTextInput} /> </div> ); } }
为类组件增加ref class AutoFocusTextInput extends React.Component { constructor(props) { super(props); this.textInput = React.createRef(); } componentDidMount() { this.textInput.current.focusTextInput(); } render() { return ( <CustomTextInput ref={this.textInput} /> ); } }
函数式组件-Refs(组件没有实例-不能使用)
function MyFunctionalComponent() { return <input />; } class Parent extends React.Component { constructor(props) { super(props); this.textInput = React.createRef(); } render() { // 这将 *不会* 工作！ return ( <MyFunctionalComponent ref={this.textInput} /> ); } }
函数式组件-Refs(组件内部可以使用）
function CustomTextInput(props) { // 这里必须声明 textInput，这样 ref 回调才可以引用它 let textInput = null; function handleClick() { textInput.focus(); } return ( <div> <input type="text" ref={(input) => { textInput = input; }} /> <input type="button" value="Focus the text input" onClick={handleClick} /> </div> ); }
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> ); } }
如果 ref 回调以内联函数的方式定义，在更新期间它会被调用两次，第一次参数是 null ，之后参数是 DOM 元素。这是因为在每次渲染中都会创建一个新的函数实例。因此，React 需要清理旧的 ref 并且设置新的。通过将 ref 的回调函数定义成类的绑定函数的方式可以避免上述问题，但是大多数情况下无关紧要。
其实就是搬运的React官网........
标签：bsp hand 组件 this bind OLE 实例 挂载 react
原文地址：https://www.cnblogs.com/liangfc/p/10591452.html
