React表单元素的使用
2015-12-19 20:40
561 查看
一、
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>表单详解</title> </head> <body> <script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script> <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script> <script type="text/jsx"> var MyForm = React.createClass({ getInitialState: function () { return { username: "", gender: "man", checked: true }; }, handleUsernameChange: function (event) { this.setState({ username: event.target.value }); }, handleGenderChange: function (event) { this.setState({ gender: event.target.value }); }, handleCheckboxChange: function (event) { this.setState({ checked: event.target.checked }); }, submitHandler: function (event) { event.preventDefault(); console.log(this.state); }, render: function () { return <form onSubmit={this.submitHandler}> <label htmlFor="username">请输入用户名:</label> <input id="username" type="text" value={this.state.username} onChange={this.handleUsernameChange} /> <br /> <select value={this.state.gender} onChange={this.handleGenderChange}> <option value="man">男</option> <option value="woman">女</option> </select> <br /> <label htmlFor="checkbox">同意用户协议</label> <input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleCheckboxChange} /> <button type="submit">注册</button> </form>; } }); React.render(<MyForm></MyForm>, document.body); </script> </body> </html>
相关文章推荐
- ReactJS学习笔记(三)
- 用ReactJS和Python的Flask框架编写留言板的代码示例
- 用ReactJS和Python的Flask框架编写留言板的代码示例
- React可控组件与不可控组件
- React组件-mixin
- React-组件嵌套-子组件通过委托向父组件传值
- react-native 布局
- 如何创建一个Android原生的react-native组件(一)
- ReactiveCocoa源码拆分解析(一)
- React事件属性
- React事件函数简介
- React编写文本评论框
- React属性和状态对比
- React addons载入方式变化
- React架构、设计思想
- React状态的含义和用法
- React属性的3种设置方式
- 前端开发入门:框架篇-ReactJS入门学习
- React Native Android 开发中遇到的坑
- React Native Android 使用友盟SDK功能