详细分析React 表单与事件


Posted in Javascript onJuly 08, 2020

本章节我们将讨论如何在 React 中使用表单。

HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。

在 HTML 当中,像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态,并根据用户输入进行更新。但在React中,可变的状态通常保存在组件的状态属性中,并且只能用 setState() 方法进行更新。

一个简单的实例

在实例中我们设置了输入框 input 值 value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化,并修改 state。

class HelloMessage extends React.Component {
 constructor(props) {
  super(props);
  this.state = {value: 'Hello 3water!'};
  this.handleChange = this.handleChange.bind(this);
 }
 
 handleChange(event) {
 this.setState({value: event.target.value});
 }
 render() {
 var value = this.state.value;
 return <div>
   <input type="text" value={value} onChange={this.handleChange} /> 
   <h4>{value}</h4>
   </div>;
 }
}
ReactDOM.render(
 <HelloMessage />,
 document.getElementById('example')
);

上面的代码将渲染出一个值为 Hello 3water! 的 input 元素,并通过 onChange 事件响应更新用户输入的值。

实例 2

在以下实例中我们将为大家演示如何在子组件上使用表单。 onChange 方法将触发 state 的更新并将更新的值传递到子组件的输入框的 value 上来重新渲染界面。

你需要在父组件通过创建事件句柄 (handleChange) ,并作为 prop (updateStateProp) 传递到你的子组件上。

class Content extends React.Component {
 render() {
 return <div>
   <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> 
   <h4>{this.props.myDataProp}</h4>
   </div>;
 }
}
class HelloMessage extends React.Component {
 constructor(props) {
  super(props);
  this.state = {value: 'Hello 3water!'};
  this.handleChange = this.handleChange.bind(this);
 }
 
 handleChange(event) {
 this.setState({value: event.target.value});
 }
 render() {
 var value = this.state.value;
 return <div>
   <Content myDataProp = {value} 
    updateStateProp = {this.handleChange}></Content>
   </div>;
 }
}
ReactDOM.render(
 <HelloMessage />,
 document.getElementById('example')
);

运行结果

详细分析React 表单与事件

Select 下拉菜单

在 React 中,不使用 selected 属性,而在根 select 标签上用 value 属性来表示选中项。

class FlavorForm extends React.Component {
 constructor(props) {
 super(props);
 this.state = {value: 'coconut'};
 
 this.handleChange = this.handleChange.bind(this);
 this.handleSubmit = this.handleSubmit.bind(this);
 }
 
 handleChange(event) {
 this.setState({value: event.target.value});
 }
 
 handleSubmit(event) {
 alert('Your favorite flavor is: ' + this.state.value);
 event.preventDefault();
 }
 
 render() {
 return (
  <form onSubmit={this.handleSubmit}>
  <label>
   选择您最喜欢的网站
   <select value={this.state.value} onChange={this.handleChange}>
   <option value="gg">Google</option>
   <option value="rn">Runoob</option>
   <option value="tb">Taobao</option>
   <option value="fb">Facebook</option>
   </select>
  </label>
  <input type="submit" value="提交" />
  </form>
 );
 }
}
 
ReactDOM.render(
 <FlavorForm />,
 document.getElementById('example')
);

运行结果

详细分析React 表单与事件

多个表单

当你有处理多个 input 元素时,你可以通过给每个元素添加一个 name 属性,来让处理函数根据 event.target.name 的值来选择做什么。

class Reservation extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
  isGoing: true,
  numberOfGuests: 2
 };
 
 this.handleInputChange = this.handleInputChange.bind(this);
 }
 
 handleInputChange(event) {
 const target = event.target;
 const value = target.type === 'checkbox' ? target.checked : target.value;
 const name = target.name;
 
 this.setState({
  [name]: value
 });
 }
 
 render() {
 return (
  <form>
  <label>
   是否离开:
   <input
   name="isGoing"
   type="checkbox"
   checked={this.state.isGoing}
   onChange={this.handleInputChange} />
  </label>
  <br />
  <label>
   访客数:
   <input
   name="numberOfGuests"
   type="number"
   value={this.state.numberOfGuests}
   onChange={this.handleInputChange} />
  </label>
  </form>
 );
 }
}

输出结果

详细分析React 表单与事件

React 事件

以下实例演示通过 onClick 事件来修改数据:

class HelloMessage extends React.Component {
 constructor(props) {
  super(props);
  this.state = {value: 'Hello 3water!'};
  this.handleChange = this.handleChange.bind(this);
 }
 
 handleChange(event) {
 this.setState({value: '三水点靠木'})
 }
 render() {
 var value = this.state.value;
 return <div>
   <button onClick={this.handleChange}>点我</button>
   <h4>{value}</h4>
   </div>;
 }
}
ReactDOM.render(
 <HelloMessage />,
 document.getElementById('example')
);

当你需要从子组件中更新父组件的 state 时,你需要在父组件通过创建事件句柄 (handleChange) ,并作为 prop (updateStateProp) 传递到你的子组件上。实例如下:

class Content extends React.Component {
 render() {
 return <div>
    <button onClick = {this.props.updateStateProp}>点我</button>
    <h4>{this.props.myDataProp}</h4>
   </div>
 }
}
class HelloMessage extends React.Component {
 constructor(props) {
  super(props);
  this.state = {value: 'Hello 3water!'};
  this.handleChange = this.handleChange.bind(this);
 }
 handleChange(event) {
 this.setState({value: '三水点靠木'})
 }
 render() {
 var value = this.state.value;
 return <div>
   <Content myDataProp = {value} 
    updateStateProp = {this.handleChange}></Content>
   </div>;
 }
}
ReactDOM.render(
 <HelloMessage />,
 document.getElementById('example')
);

运行结果

详细分析React 表单与事件

以上就是详细分析React 表单与事件的详细内容,更多关于React 表单与事件的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js控制浏览器全屏示例代码
Feb 20 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
易被忽视的js事件问题总结
May 14 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 Javascript
详解JavaScript之ES5的继承
Jul 08 #Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 #jQuery
微信小程序拖拽排序列表的示例代码
Jul 08 #Javascript
基于javascript canvas实现五子棋游戏
Jul 08 #Javascript
深度解读vue-resize的具体用法
Jul 08 #Javascript
详解React 条件渲染
Jul 08 #Javascript
webpack5 联邦模块介绍详解
Jul 08 #Javascript
You might like
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
jQuery中animate用法实例分析
2015/03/09 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
python中Flask框架简单入门实例
2015/03/21 Python
Python+django实现文件上传
2016/01/17 Python
Python 操作MySQL详解及实例
2017/04/30 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
JNI的定义
2012/11/25 面试题
优秀英文求职信范文
2015/03/19 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
2015年党员个人工作总结
2015/05/13 职场文书