关于建设招商网站的通知邹平县seo网页优化外包
1.React中refs属性
绑定到render输出的任何组件上，通过this.ref.绑定名直接操作DOM元素或获取子组件的实例。
2.绑定refs实例
2.1 字符串refs(已经过时参考官网API)
字符串(string)的ref存在一定的效率问题
<input ref='input1' type="text" placeholeder='点击按钮提示数据'/><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello，React</title>
</head><body><!-- 容器 --><div id="test"></div><!-- {/* // 引入 React核心库 */} --><script src="https://unpkg.com/react@16/umd/react.production.min.js"></script><!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} --><script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- {/* // 引入 JSX 语法 */} --><script type="text/babel">// 1.创建组件class MyComponent extends React.Component {render() {return (<div><input ref='input1' type="text" placeholeder='点击按钮提示数据'/> <button ref='button1' onClick={this.showData}>点击提示左侧数据</button> <input ref='input2' onBlur={this.showData2} type="text" placeholeder='失去焦点提示数据'/></div>)}// 左侧事件处理函数 ref标识使用showData = () => {console.log(this);alert(this.refs.input1.value);}// 右侧事件处理函数 失去焦点触发showData2 = () => {alert(this.refs.input2.value);}}// 2. 渲染虚拟DOM到页面ReactDOM.render(<MyComponent />,document.getElementById('test'))</script>
</body></html>2.2 回调形式refs
<input ref={c => this.input1 = c} type="text" placeholeder='点击按钮提示数据'/>整体代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello，React</title>
</head><body><!-- 容器 --><div id="test"></div><!-- {/* // 引入 React核心库 */} --><script src="https://unpkg.com/react@16/umd/react.production.min.js"></script><!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} --><script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- {/* // 引入 JSX 语法 */} --><script type="text/babel">// 1.创建组件class MyComponent extends React.Component {// 回调函数 形式的ref标识使用render() {return (<div><input ref={c => this.input1 = c} type="text" placeholeder='点击按钮提示数据'/> <button onClick={this.showData}>点击提示左侧数据</button> <input ref={c => this.input2 = c} onBlur={this.showData2} type="text" placeholeder='失去焦点提示数据'/></div>)}// 左侧事件处理函数 ref标识使用showData = () => {const {input1} =thisalert(input1.value);}// 右侧事件处理函数 失去焦点触发showData2 = () => {const {input2} =thisalert(input2.value);}}// 2. 渲染虚拟DOM到页面ReactDOM.render(<MyComponent />,document.getElementById('test'))</script>
</body></html>2.2.1 回调函数refs以内联方式定义，更新过程中会执行两次
ref回调函数如果以内联函数的方式定义，在更新的过程中会执行两次，第一次传入null，第二次传入参数DOM元素，每次渲染时会创建新的函数实例，所以React清空旧的的ref并设置新的。影响几乎不存在
整体代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello，React</title>
</head><body><!-- 容器 --><div id="test"></div><!-- {/* // 引入 React核心库 */} --><script src="https://unpkg.com/react@16/umd/react.production.min.js"></script><!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} --><script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- {/* // 引入 JSX 语法 */} --><script type="text/babel">// 1.创建组件class MyComponent extends React.Component {state = {isHot:true}// 事件处理函数 ref标识使用showData = () => {const {input1} =thisalert(input1.value);}// 回调函数 形式的ref标识使用render() {const {isHot} = this.statereturn (<div><h2>{isHot?'很热':'很冷'}</h2><button onClick={()=>this.setState({isHot:!isHot})}>点击切换天气</button> <input ref={c => {this.input1 = c;console.log('渲染次数：',c)}} type="text" placeholeder='点击按钮提示数据'/> <button onClick={this.showData}>点击提示左侧数据</button> </div>)}}// 2. 渲染虚拟DOM到页面ReactDOM.render(<MyComponent />,document.getElementById('test'))</script>
</body></html>2.3 React.createRef() 容器存储ref所标识的节点
2.3.1 声明调用
// 调用后返回容器(声明唯一标识使用)，容器存储ref所标识的节点myRef = React.createRef() showData = () => {console.log(this.myRef.current.value);alert(this.myRef.current.value);}2.3.2 对应节点绑定
<input ref={this.myRef} type="text" placeholeder='点击按钮提示数据'/> 2.3.3 整体代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello，React</title>
</head><body><!-- 容器 --><div id="test"></div><!-- {/* // 引入 React核心库 */} --><script src="https://unpkg.com/react@16/umd/react.production.min.js"></script><!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} --><script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- {/* // 引入 JSX 语法 */} --><script type="text/babel">// 1.创建组件class MyComponent extends React.Component {// 调用后返回容器(声明唯一标识使用)，容器存储ref所标识的节点myRef = React.createRef()myRef2 = React.createRef()// 事件处理函数showData = () => {console.log(this.myRef.current.value);alert(this.myRef.current.value);}// 失去焦点处理函数showData2 = () => {console.log(this.myRef.current.value);alert(this.myRef.current.value);}render() {return (<div><input ref={this.myRef} type="text" placeholeder='点击按钮提示数据'/> <button onClick={this.showData}>点击</button> <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholeder='点击按钮提示数据'/> </div>)}}// 2. 渲染虚拟DOM到页面ReactDOM.render(<MyComponent />,document.getElementById('test'))</script>
</body></html>