reactjs 笔记

<script type="text/babel">
var Hello=React.createClass({
render:function(){
return <span>1</span>;
}
});
ReactDOM.render(<Hello />,
document.getElementById('example') 此处不能家分号，会报错
)

</script>

 

var APP = React.createClass({
    getInitialState: function() {  定义组建的默认状态。定义默认值要使用对象字面量
        return {
            txt: 'this is some text from initial state'
        }
    },
    render: function(){
        return (
            <div>
              <h1>Hello React</h1>
              <p>{this.state.txt}</p>
            </div>
        )
    }
});

var LikeButton=React.createClass({

getInitialState:function(){
return {liked:false}; 注意单词的拼写，false，设置默认值
},
aa:function(event){
this.setState({liked:!this.state.liked}); 定义一个事件，aa可以根据自己爱好写名字，通过这个事件使用setsate来设置liked的值，liked的值是通过逻辑非！控制，例如如果liked的值是false那么liked就是true
},
render:function(){
var text=this.state.liked?'喜欢':'不喜欢'; 返回值，如this.state.liked的值是true 那么te'x't就是喜欢，flase就是不喜欢

return (
<p onClick={this.aa}> 调用aa事件进行切换liked的值
你<b>{text}</b>我。点我切换状态。
</p>
);

}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);

event.target 获取元素的的信息

　　　　event.target.nodeName  　　//获取事件触发元素标签name（li,p...）

　　　　event.target.id　　　　　　　//获取事件触发元素id

　　　　event.target.className　　//获取事件触发元素classname

　　　　event.target.innerHTML　　//获取事件触发元素的内容（li

 event.target.textContent 获取text:

event.target.value  获取value: