react refs属性

refs属性

• 概念：组件三大属性之一，唯一标识，可以操作真实DOM

// refs属性，通过操作虚拟DOM来操作真实DOM
class App extends React.Component{
    // 构造方法，继承父组件
    constructor(props){
        super(props); // 调用父组件的属性
        this.handleclick = this.handleclick.bind(this) // 组件中自定义的方法需要强制绑定this
    }
    // 自定义组件方法
    handleclick(){
        let val = this.refs.val.value;
        alert(val)
    }

    handleblur(event){
        // event当前事件的回调函数，target指向当前事件的对象
        alert(event.target.value)
    }
    render() {
        return (
            <div>
                <input ref="val" /> {/* 定义ref属性来标识标签，方便操作dom */}
                <button onClick={this.handleclick}>点击弹出输入框内容</button> {/* 绑定点击事件 */}
                <input onBlur={this.handleblur} placeholder="失去焦点事件，event回调"/>
            </div>
        )
    }
}

// 渲染
ReactDOM.render(<App />,document.getElementById("example") )

注意：点击事件没有用event回调函数是因为，事件在button上而获取的数据在另一个DOM上