6. React 表单使用介绍
不可控组件和可控组件介绍
<script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var MyForm = React.createClass({
submitHandler: function (event) {
event.preventDefault();
var helloTo = React.findDOMNode(this.refs.helloTo).value;
alert(helloTo);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<input
ref="helloTo"
type="text"
defaultValue="Hello World!" />
<br />
<button type="submit">Speak</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
可控组件
<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 {
helloTo: "Hello World!"
};
},
handleChange: function (event) {
this.setState({
helloTo: event.target.value
});
},
submitHandler: function (event) {
event.preventDefault();
alert(this.state.helloTo);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<input type="text" value={this.state.helloTo} onChange={this.handleChange} />
<br />
<button type="submit">Speak</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
不同表单元素的使用
<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>
事件处理函数复用
<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>
name复用
<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>
表单组件自定义
<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 Radio = React.createClass({
getInitialState: function () {
return {
value: this.props.defaultValue
};
},
handleChange: function (event) {
if (this.props.onChange) {
this.props.onChange(event);
}
this.setState({
value: event.target.value
});
},
render: function () {
var children = {};
var value = this.props.value || this.state.value;
React.Children.forEach(this.props.children, function (child, i) {
var label = <label>
<input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} />
{child.props.children}
<br/>
</label>;
children['label' + i] = label;
}.bind(this));
return <span>{children}</span>;
}
});
// 不可控组件
/*var MyForm = React.createClass({
submitHandler: function (event) {
event.preventDefault();
alert(this.refs.radio.state.value);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<Radio ref="radio" name="my_radio" defaultValue="B">
<option value="A">First Option</option>
<option value="B">Second Option</option>
<option value="C">Third Option</option>
</Radio>
<button type="submit">Speak</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);*/
// 可控组件
var MyForm = React.createClass({
getInitialState: function () {
return {my_radio: "B"};
},
handleChange: function (event) {
this.setState({
my_radio: event.target.value
});
},
submitHandler: function (event) {
event.preventDefault();
alert(this.state.my_radio);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<Radio name="my_radio" value={this.state.my_radio} onChange={this.handleChange}>
<option value="A">First Option</option>
<option value="B">Second Option</option>
<option value="C">Third Option</option>
</Radio>
<button type="submit">Speak</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
6. React 表单使用介绍的更多相关文章
- react 表单获取多个input
react 表单this.handleChange(key,e){ [key]:e.target.value} submit=()=>{ const {userName,age,status} ...
- 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容
一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...
- 翻译 | 玩转 React 表单 —— 受控组件详解
原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...
- [转]React表单无法输入原因----约束性和非约束性组件
转自:http://blog.csdn.net/lihongxun945/article/details/46730835 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑. React对表 ...
- react 表单
import React ,{PropTypes}from 'react'; import { render } from 'react-dom'; const styles={ mb10:{ mar ...
- React表单元素的使用
一. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF ...
- BootStrap 智能表单系列 四 表单布局介绍
表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...
- react表单事件和取值
常见的表单包括输入框,单选框,复选框,下拉框和多文本框,本次主要总结它们在react中如何取值. 输入框 在之前有说过输入框,可以先给input框的value绑定一个值,然后通过input框的改变事件 ...
- React 表单组件
诸如 <input>.<textarea>.<option> 这样的表单组件不同于其他组件,因为他们可以通过用户交互发生变化.这些组件提供的界面使响应用户交互的表单 ...
随机推荐
- bzoj 4448: [Scoi2015]情报传递
Description 奈特公司是一个巨大的情报公司,它有着庞大的情报网络.情报网络中共有n名情报员.每名情报员口J-能有 若T名(可能没有)下线,除1名大头日外其余n-1名情报员有且仅有1名上线.奈 ...
- Linux查看CPU、内存、进程使用情况(转)
在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CPU 使用状况.运行 top 命令后,CPU 使用状态会 ...
- 分布式改造剧集之Redis缓存采坑记
Redis缓存采坑记 前言 这个其实应该属于分布式改造剧集中的一集(第一集见前面博客:http://www.cnblogs.com/Kidezyq/p/8748961.html),本来按照顺序 ...
- P20 旅行助手,从未有过的至尊私人导游服务!
旅行可以让人暂时抛掉生活中的琐事,工作上的压力,寻找内心的宁静.有的人是为了想多去见识不同的事物和人文风情,有的人是想去感受大自然的馈赠,看历史古迹感受古人智慧.歌德说过:人之所以爱旅行,不是为了抵达 ...
- 优化Webpack打包速度
1. Webpack 可以配置 externals 来将依赖的库指向全局变量,从而不再打包这个库,比如对于这样一个文件: import React from 'react'; console.lo ...
- RedisAsyncClientAdapter-------------接口继承
public abstract class RedisAsyncClientAdapter<K, V, T extends RedisKeyAsyncCommands<K, V> & ...
- jquery常用函数
.text() //获得或更改元素文本: .html() //获得或更改元素标签: .val() //获得或更改input值: .css() //获得或更改元素样式: .click() //点击触发事 ...
- JAVA 第二天 关键字
一.标识符及字符集 Java语言规定标识符是以字母.下划线"_"或美元符号"$"开始,随后可跟数字.字母.下划线或美元符号的字符序列.Java标识符大小写敏感, ...
- MongoDB 连接
启动 MongoDB服务 在前面的教程中,我们已经讨论了如何启动MongoDB服务,你只需要在MongoDB安装目录的bin目录下执行'mongod'即可. 执行启动操作后,mongodb在输出一些必 ...
- CSDN没有审核投诉的真实性直接删除博主上传的资源
今天打开博客,发现一条未读通知:您上传的资源* * * *因质量投诉没有通过审核,如有疑问,请联系webmaster@csdn.net 我马上去看了下我的资源下载页,资源已经被删除,积分也已清空- ...