详细分析React 表单与事件

这篇文章主要介绍了React 表单与事件的相关资料，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下

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

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

在 HTML 当中，像 , , 和这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。</p> <p><strong>一个简单的实例</strong></p> <p>在实例中我们设置了输入框 input 值 value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化，并修改 state。</p> <pre class="brush:js;"> class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello jb51!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } render() { var value = this.state.value; return <h4>{value}</h4>; } } ReactDOM.render( , document.getElementById('example') );</pre> <p>上面的代码将渲染出一个值为 Hello jb51! 的 input 元素，并通过 onChange 事件响应更新用户输入的值。</p> <p><strong>实例 2<br /></strong></p> <p>在以下实例中我们将为大家演示如何在子组件上使用表单。 onChange 方法将触发 state 的更新并将更新的值传递到子组件的输入框的 value 上来重新渲染界面。</p> <p>你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上。</p> <pre class="brush:js;"> class Content extends React.Component { render() { return <h4>{this.props.myDataProp}</h4>; } } class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello jb51!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } render() { var value = this.state.value; return ; } } ReactDOM.render( , document.getElementById('example') );</pre> <p>运行结果</p> <p style="text-align: center"> <p><strong>Select 下拉菜单</strong></p> <p>在 React 中，不使用 selected 属性，而在根 select 标签上用 value 属性来表示选中项。</p> <pre class="brush:js;"> 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 ( <label> 选择您最喜欢的网站 GoogleRunoobTaobaoFacebook</label> ); } } ReactDOM.render( , document.getElementById('example') );</pre> <p>运行结果</p> <p style="text-align: center"> <p><strong>多个表单<br /></strong></p> <p>当你有处理多个 input 元素时，你可以通过给每个元素添加一个 name 属性，来让处理函数根据 <code>event.target.name </code>的值来选择做什么。</p> <pre class="brush:js;"> 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 ( <label> 是否离开: </label><br /><label> 访客数: </label> ); } }</pre> <p>输出结果</p> <p style="text-align: center"> <p><strong>React 事件</strong></p> <p>以下实例演示通过 onClick 事件来修改数据：</p> <pre class="brush:js;"> class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello jb51!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: '本站'}) } render() { var value = this.state.value; return <button>点我</button><h4>{value}</h4>; } } ReactDOM.render( , document.getElementById('example') );</pre> <p>当你需要从子组件中更新父组件的 state 时，你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上。实例如下：</p> <pre class="brush:js;"> class Content extends React.Component { render() { return <button>点我</button><h4>{this.props.myDataProp}</h4> } } class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello jb51!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: '本站'}) } render() { var value = this.state.value; return ; } } ReactDOM.render( , document.getElementById('example') );</pre> <p>运行结果</p> <p style="text-align: center"> <p>以上就是详细<a href="https://kunjuke.com/tag/5303/" title="分析" target="_blank">分析</a>React 表单与事件的详细内容，更多关于React 表单与事件的资料请关注本站其它相关文章！</p> <p>以上就是详细分析React 表单与事件的详细内容，更多请关注本站其它相关文章！</p> </div> <div class="down" id="down"> <div class="downl"> <p><b>《详细分析React 表单与事件.doc》</b></p> <p>下载本文的Word格式文档，以方便收藏与打印。</p> </div> <div class="downr"> <input type="button" class="dinput" value="导出WORD"> </div> </div> </div> <ul class="ul-list"> <li> <ins class="adsbygoogle" style="display:inline-block;width:100%;height:120px" data-ad-client="ca-pub-6278534685681362" data-ad-slot="4967365039"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </li> <h3 class="sidebar_title indexnew">相关推荐</h3> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/871284.html"><h6>如何搭建React开发环境</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/871284.html"><img src="https://www.kunjuke.com/file/css/thumb/3.jpg/280-180.jpg" alt="如何搭建React开发环境"></a></div> <div class="news-info"> <p>今天就跟大家聊聊有关如何搭建React开发环境，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。一、Node.js下载安装 ① 百度搜索Node.js下载...</p> <span><i class="fa fa-clock-o fa-fw"></i>2024-03-14<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/1755/" rel="tag">react</a></span> </div> </div> </li> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/870895.html"><h6>react中ref获取dom或者组件如何实现</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/870895.html"><img src="https://www.kunjuke.com/file/css/thumb/5.jpg/280-180.jpg" alt="react中ref获取dom或者组件如何实现"></a></div> <div class="news-info"> <p>本篇文章和大家了解一下react中ref获取dom或者组件如何实现。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 react中ref获取dom或者组件方法使用ref获取DOM的引用在vue中，如果想获取DOM元...</p> <span><i class="fa fa-clock-o fa-fw"></i>2024-03-14<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/436/" rel="tag">DOM</a>,<a href="https://kunjuke.com/tag/1755/" rel="tag">react</a>,<a href="https://kunjuke.com/tag/9727/" rel="tag">ref</a></span> </div> </div> </li> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/870795.html"><h6>React和ts如何实现二级联动效果</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/870795.html"><img src="https://www.kunjuke.com/file/css/thumb/4.jpg/280-180.jpg" alt="React和ts如何实现二级联动效果"></a></div> <div class="news-info"> <p>这篇文章主要介绍React和ts如何实现二级联动效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ .tsx文件 import { Component, createRef} from 'react...</p> <span><i class="fa fa-clock-o fa-fw"></i>2024-03-14<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/1755/" rel="tag">react</a>,<a href="https://kunjuke.com/tag/103128/" rel="tag">TS</a></span> </div> </div> </li> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/870794.html"><h6>怎么用react+ts实现简单jira项目</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/870794.html"><img src="https://www.kunjuke.com/file/css/thumb/8.jpg/280-180.jpg" alt="怎么用react+ts实现简单jira项目"></a></div> <div class="news-info"> <p>这篇文章主要介绍“怎么用react+ts实现简单jira项目”，在日常操作中，相信很多人在怎么用react+ts实现简单jira项目问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用react+ts...</p> <span><i class="fa fa-clock-o fa-fw"></i>2024-03-14<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/1755/" rel="tag">react</a>,<a href="https://kunjuke.com/tag/103128/" rel="tag">TS</a></span> </div> </div> </li> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/869748.html"><h6>如何用40行代码把Vue3的响应式集成进React做状态管理</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/869748.html"><img src="https://www.kunjuke.com/file/css/thumb/10.jpg/280-180.jpg" alt="如何用40行代码把Vue3的响应式集成进React做状态管理"></a></div> <div class="news-info"> <p>这篇文章主要讲解了如何用40行代码把Vue3的响应式集成进React做状态管理，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。前言 vue-next是Vue3的源码仓库，Vue3采用lerna做package...</p> <span><i class="fa fa-clock-o fa-fw"></i>2023-10-24<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/1755/" rel="tag">react</a>,<a href="https://kunjuke.com/tag/122382/" rel="tag">ue</a>,<a href="https://kunjuke.com/tag/103444/" rel="tag">Vue3</a></span> </div> </div> </li> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/869643.html"><h6>Sourcetrail 代码分析工具的使用</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/869643.html"><img src="https://www.kunjuke.com/file/css/thumb/8.jpg/280-180.jpg" alt="Sourcetrail 代码分析工具的使用"></a></div> <div class="news-info"> <p>Sourcetrail 概述 Sourcetrail 是一个代码分析工具，它旨在帮助开发人员理解和导航复杂的代码库。它可以创建代码库的可视化图形，显示代码中的类、函数、变量、依赖关系等信息，从而帮助开发人员更好地理解代码结...</p> <span><i class="fa fa-clock-o fa-fw"></i>2023-08-16<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/142/" rel="tag">代码</a>,<a href="https://kunjuke.com/tag/5303/" rel="tag">分析</a>,<a href="https://kunjuke.com/tag/320/" rel="tag">工具</a></span> </div> </div> </li> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/868984.html"><h6>Visual C++中各种文件的作用（详细）</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/868984.html"><img src="https://www.kunjuke.com/file/css/thumb/10.jpg/280-180.jpg" alt="Visual C++中各种文件的作用（详细）"></a></div> <div class="news-info"> <p>参考：http://blog.sina.com.cn/s/blog_6975d67c0100r3kx.html DSW:全称是Developer Studio Workspace，最高级别的配置文件，记录了整个工作空间的配置信息，她是一个纯文本的文件，在vc创建新项目的时候自动生成...</p> <span><i class="fa fa-clock-o fa-fw"></i>2023-07-31<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/4618/" rel="tag">作用</a>,<a href="https://kunjuke.com/tag/1478/" rel="tag">文件</a>,<a href="https://kunjuke.com/tag/4630/" rel="tag">详细</a></span> </div> </div> </li> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/868857.html"><h6>数据分析05-matplotlib基本绘图、高级绘图</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/868857.html"><img src="https://www.kunjuke.com/file/css/thumb/4.jpg/280-180.jpg" alt="数据分析05-matplotlib基本绘图、高级绘图"></a></div> <div class="news-info"> <p>数据分析-05 数据分析-05 matplotlib基本功能详解基本绘图 1）绘图核心API 2）设置线型、线宽 3）设置坐标轴范围 4）设置坐标刻度 5）设置坐标轴 6）图例 7）特殊点 8）备注高级绘图 1）子图 2）散点图 3）填充...</p> <span><i class="fa fa-clock-o fa-fw"></i>2023-07-30<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/5303/" rel="tag">分析</a>,<a href="https://kunjuke.com/tag/570/" rel="tag">绘图</a>,<a href="https://kunjuke.com/tag/107205/" rel="tag">高级</a></span> </div> </div> </li> </ul> </div> <div class="sidebar" id="sidebar"> <div class="right-content" id="sidead"> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-6278534685681362" data-ad-slot="4967365039"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="right-content" id="sidead"> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-6278534685681362" data-ad-slot="4967365039"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <a class="scroll-top" style="display: none;"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i></a> <div class="footer-news"> <div class="links"></div> <p><i class="fa fa-copyright fa-fw"></i>Copyright 2023. <a href="https://www.kunjuke.com/">昆居客</a><b class="cang"> - IT编程,互联网信息技术文档大全!<b></p> </div><script src="/file/css/all.js"></script> <script src="/file/css/tongji.js"></script> <script src='/file/css/gaoliang/main.js'></script> <script src='/file/css/gaoliang/prettyprint.js'></script> <script src="/file/css/FileSaver.js"></script> <script src="/file/css/jquery.wordexport.js"></script> <script> $(function(){ $("input[type='button']").click(function(event) { $(".content").wordExport('详细分析React 表单与事件'); }); }) </script> </body> </html>