React组件三大属性之 refs
React组件三大属性之 refs
refs属性
1) 组件内的标签都可以定义ref属性来标识自己
a. <input type="text" ref={input => this.msgInput = input}/>
b. 回调函数在组件初始化渲染完或卸载时自动调用
2) 在组件中可以通过this.msgInput来得到对应的真实DOM元素
3) 作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据
事件处理
1) 通过onXxx属性指定组件的事件处理函数(注意大小写)
a. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
b. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2) 通过event.target得到发生事件的DOM元素对象
<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target //返回input对象
}
强烈注意
1) 组件内置的方法中的this为组件对象
2) 在组件类中自定义的方法中this为null
a. 强制绑定this: 通过函数对象的bind()
b. 箭头函数(ES6模块化编码时才能使用)
例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/babel.min.js"></script> <script src="../js/prop-types.js"></script> </head> <body> <div id="test"></div> <script type="text/babel"> /* 需求: 自定义组件, 功能说明如下: 1. 界面如果页面所示 2. 点击按钮, 提示第一个输入框中的值 3. 当第2个输入框失去焦点时, 提示这个输入框中的值 */ //1、定义组件 class MyComponent extends React.Component { constructor(props) { super(props) // 调用父类(Component)的构造函数 // 将自定义的函数强制绑定为组件对象 this.handleClick = this.handleClick.bind(this) // 将返回函数中的this强制绑定为指定的对象, 并没有改变原来的函数中的this this.handleBlur = this.handleBlur.bind(this) // 将返回函数中的this强制绑定为指定的对象, 并没有改变原来的函数中的this } handleClick(){ //官方不建议这么写 const input = this.refs.content alert(input.value) //建议这么搞 alert(this.x.value) } handleBlur(event){ alert(event.target.value) } render() { return ( <div> <input type="text" ref="content"/>{' '} <input type="text" ref={x => this.x = x}/>{' '} <button onClick={this.handleClick}>提示输入数据</button>{' '} <input type="text" placeholder="失去焦点提示数据" onBlur={this.handleBlur}/> </div> ) } } //2、渲染组件标签 ReactDOM.render(<MyComponent/>,document.getElementById('test')) </script> </body> </html>