<!DOCTYPE html>
<html>
<head>
<title>React JS</title>
<script src="../build_0.13/react.js"></script>
<script src="../build_0.13/JSXTransformer.js"></script>
<script>
function dateToString(d){
return [d.getFullYear(), d.getMonth()+1, d.getDate()].join('-');
}
</script>
</head>
<body>
<div id="example">
</div>
<script type="text/jsx">
var MyForm = React.createClass({
//初始设置值
getInitialState:function(){
return {helloTo:"hello world!"};
},
//onchange事件
handleChange:function(event){
this.setState({
helloTo:event.target.value.toUpperCase()
});
},
//提交事件
submitHandler:function(event){
event.preventDefault(); //阻止默认的事件
alert(this.state.helloTo);
},
render:function(){
return (
<form onSubmit={this.submitHandler} >
<input ref="helloTo" type="text" value={this.state.helloTo}
onChange={this.handleChange} />
<br/>
<button type="submit">speak</button>
</form>
);
}
});
//将组件加到对应的元素上
React.render( <MyForm />, document.getElementById('example') );
</script>
</body>
</html>
注意：
1.组件名称：第一个字母要大写，并使用驼峰法命名
2.onchange、onsubmit事件在Render里面要使用驼峰法的命名， onChange={this.handleChange} 切忌不能写成这样 onChange="{this.handleChange}"
3.通过event.target来访问触发实际的DOM节点,这是访问约束组件的最简单最直接的方式之一
handleEvent:function(event){
var DOMNode = event.target;
var newValue = DOMNode.value;
}
