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: