React(0.13) 定义一个input组件,使其输入的值转为大写
<!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;
}