react5 事件 satate
<body>
<!-- React 真实 DOM 将会插入到这里 -->
<div id="example"></div>
<!-- 引入 React -->
<script src="src/libs/react.js"></script>
<!-- 引入 JSX 语法格式转换器 -->
<script src="src/libs/JSXTransformer.js"></script>
<script src="src/libs/jquery.js"></script>
<!-- 注意：script 需要注明 type 为 text/jsx 以指定这是一个 JSX 语法格式 -->
<script type="text/jsx">
var Count = React.createClass({
incrementCount:function () {
this.setState({
count: this.state.count + 1
});
},
getInitialState:function(){
return {
count:0
}
},
render:function(){
return (
<div className='component'>
<h1>Count: {this.state.count}</h1>
<button type="button" onClick={this.incrementCount}>点击me</button>
</div>
);
}
})
React.render(
<Count />,
document.getElementById('example')
);
</script>
</body>
注意我上面标记的地方是不能添加分号的
JSX中的事件绑定
JSX支持事件的绑定，语法类似于HTML中事件的绑定，不同的是这里事件的名称必须按照驼峰式，例如change变成onChange,click变成onClick等。
this.state
组件免不子要与用户互动，React的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染UI
在这模块中，有一个新的函数 getInitialState 。当模块初始化的时候，React会调用这个函数。而返回的对象则作为React的初始化状态(看函数名就知道)。
浙公网安备 33010602011771号