详细分析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 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
JavaScript中CreateTextFile函数
Aug 30 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
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python求斐波那契数列示例分享
2014/02/14 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
python实现计算图形面积
2021/02/22 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
幼儿园元旦活动感言
2014/03/02 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
学校重阳节活动总结
2015/03/24 职场文书
西柏坡观后感
2015/06/08 职场文书
春风化雨观后感
2015/06/11 职场文书
党员发展大会主持词
2015/07/03 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
创业计划书之服装
2019/10/07 职场文书
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
浅谈Python中对象是如何被调用的
2022/04/06 Python