【学】React的学习之旅3 - 添加事件(onClick)

• button除了用<input type="button">之外，还可以直接用<button></button>来创建，而2个标签的中间的内容就相当于value，甚至中间可以放图片
• 当给每个元素加入事件时，可以用onClick={this.fn}的方式，注意onClick的大小写，驼峰式的。而对应的fn函数，写在该class中，以属性的方式，当点击后就调用实例身上的fn属性，其实就是调用了函数，函数中同样可以传入事件对象
• 为了找到组件中的某个元素，可以在该元素定义ref属性，值为该元素的名称索引，在事件函数中可以通过this.refs[索引名称]找到，而refs本身也是组件实例的一个属性，注意是复数refs，而在元素里的ref是单数
• 即使这样还不够，因为这个元素不是真是的DOM，而是虚拟DOM，要通过ReactDOM.findDOMNode()方法来进行操作

例子：创建按钮，显示隐藏旁边的文字

var TextClick = React.createClass({
    clickHandler:function(ev){ //组件中定义一个属性，作为某个事件函数，同样可以传入事件对象
        var oTip = React.findDOMNode(this.refs.tip); //refs是组件实例的一个属性，tip就是组件中某个元素定义的ref名称索引
        if(oTip.style.display === 'none'){
            oTip.style.display = 'inline';
        }else{
            oTip.style.display = 'none';
        }
    },
    render:function(){
        return (
            <div>
                <button onClick={this.clickHandler}>测试按钮</button><span ref="tip">显示隐藏</span>
            </div>
        );
    }
});

ReactDOM.render(
    <TextClick />,
    oWrap
);