React事件处理函数的bind复用和name复用
2015-12-19 21:03
591 查看
一、bind复用
二、name复用
<!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 }; }, handleChange: function (name, event) { var newState = {}; newState[name] = name == "checked" ? event.target.checked : event.target.value; this.setState(newState); }, 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.handleChange.bind(this, "username")} /> <br /> <select value={this.state.gender} onChange={this.handleChange.bind(this, "gender")}> <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.handleChange.bind(this, "checked")} /> <button type="submit">注册</button> </form>; } }); React.render(<MyForm></MyForm>, document.body); </script> </body> </html>
二、name复用
<!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 }; }, handleChange: function (event) { var newState = {}; newState[event.target.name] = event.target.name == "checked" ? event.target.checked : event.target.value; this.setState(newState); }, submitHandler: function (event) { event.preventDefault(); console.log(this.state); }, render: function () { return <form onSubmit={this.submitHandler}> <label htmlFor="username">请输入用户名:</label> <input name="username" id="username" type="text" value={this.state.username} onChange={this.handleChange} /> <br /> <select name="gender" value={this.state.gender} onChange={this.handleChange}> <option value="man">男</option> <option value="woman">女</option> </select> <br /> <label htmlFor="checkbox">同意用户协议</label> <input id="checkbox" name="checked" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleChange} /> <button type="submit">注册</button> </form>; } }); React.render(<MyForm></MyForm>, document.body); </script> </body> </html>
相关文章推荐
- React表单元素的使用
- 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 开发中遇到的坑