本章节我们将讨论如何在 React 中使用表单。
HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。
在 HTML 当中，像 , , 和 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。</p> <b>一个简单的实例</b> <p>在实例中我们设置了输入框 input 值 <b>value = {this.state.data}</b>。在输入框值发生变化时我们可以更新 state。我们可以使用 <b>onChange</b> 事件来监听 input 的变化，并修改 state。</p> <b>React 实例</b> <code> class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello Runoob!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } render() { var value = this.state.value; return <div> <h4>{value}</h4> </div>; } } ReactDOM.render( , document.getElementById('example') );</code> <br> <p> 上面的代码将渲染出一个值为 Hello Runoob! 的 input 元素，并通过 onChange 事件响应更新用户输入的值。</p> <b>实例 2</b> <p>在以下实例中我们将为大家演示如何在子组件上使用表单。 <b>onChange</b> 方法将触发 state 的更新并将更新的值传递到子组件的输入框的 <b>value</b> 上来重新渲染界面。</p> <p>你需要在父组件通过创建事件句柄 (<b>handleChange</b>) ，并作为 prop (<b>updateStateProp</b>) 传递到你的子组件上。</p> <b>React 实例</b> <code> class Content extends React.Component { render() { return <div> <h4>{this.props.myDataProp}</h4> </div>; } } class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello Runoob!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } render() { var value = this.state.value; return <div> </div>; } } ReactDOM.render( , document.getElementById('example') );</code> <br> <b>Select 下拉菜单</b> <p>在 React 中，不使用 selected 属性，而在根 select 标签上用 value 属性来表示选中项。</p> <b>React 实例</b> <code> 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> 选择您最喜欢的网站 Google Runoob Taobao Facebook </label> ); } } ReactDOM.render( , document.getElementById('example') );</code> <br> <b>多个表单</b> <p>当你有处理多个 input 元素时，你可以通过给每个元素添加一个 name 属性，来让处理函数根据 event.target.name 的值来选择做什么。</p> <b>React 实例</b> <code> 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> ); } }</code> <br> <b> <b>React 事件</b> <p>以下实例演示通过 onClick 事件来修改数据：</p> <b>React 实例</b> <code> class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello Runoob!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: '软件开发网'}) } render() { var value = this.state.value; return <div> <button>点我</button> <h4>{value}</h4> </div>; } } ReactDOM.render( , document.getElementById('example') );</code> <br> <p>当你需要从子组件中更新父组件的 <b>state</b> 时，你需要在父组件通过创建事件句柄 (<b>handleChange</b>) ，并作为 prop (<b>updateStateProp</b>) 传递到你的子组件上。实例如下：</p> <b>React 实例</b> <code> class Content extends React.Component { render() { return <div> <button>点我</button> <h4>{this.props.myDataProp}</h4> </div> } } class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello Runoob!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: '软件开发网'}) } render() { var value = this.state.value; return <div> </div>; } } ReactDOM.render( , document.getElementById('example') );</code> <br> <p><br /> <script src="/upload/common/article_bottom1.js"></script></p> <p class="info"><br /> <a href="/react/">React</a> </p> </div> <div class="card-footer clearfix"> <div class="opts"> <a title="对我有帮助" data-count="1024" data-state="deactive" data-type="article" data-id="574" class="likeable deactive digg" href="#"><i class='icon fa fa-thumbs-up'></i> <span>1024 个赞</span></a> <div class="pull-right"> <div class="dropdown"> <a href="#" data-bs-toggle ="dropdown"> <i class='icon fa fa-ellipsis-v'></i> </a> <div class="dropdown-menu dropdown-menu-end"> <a href="/user/article/574" target="_blank">编辑</a> <a href="/user/jubao/574" target="_blank">举报</a> </div> </div> </div> </div> </div> </div> <div id="replies" class="card" data-last-floor="7"> <div class="items card-body"> </div> </div> <div class="card"> <div class="card-body" style="padding: 10px;overflow: hidden;white-space: nowrap"> <script src="/upload/common/article_bottom2.js"></script> </div> </div> <div class="card"> <div class="card-body"> <div id="reply" class="form box"> <div style="padding:20px;" data-turbolinks-action="replace"> 需要 <a href="/user/login" class="btn btn-primary">登录</a> 后方可回复, 如果你还没有账号请 <a href="/user/reg">注册新账号</a> </div> </div> </div> </div> <div class="topics topics-index card"> <div class="card-body item-list"> <div class="card-header">相关文章</div> <div class="topic media topic-143" data-prefetch="/html5/143"> <div class="infos media-body"> <div class="title media-heading"> <a title="HTML5 Web Workers" target="_blank" href="/html5/143">HTML5 Web Workers</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/894">Yasmin</a> <abbr class="timeago" title='2021-05-01'>2021-05-01</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/html5/143">799</a> </div> </div> <div class="topic media topic-294937" data-prefetch="/fangfa/223076602339131392"> <div class="infos media-body"> <div class="title media-heading"> <a title="react中ref获取dom或者组件的实现方法" target="_blank" href="/fangfa/223076602339131392">react中ref获取dom或者组件的实现方法</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/616">Oria</a> <abbr class="timeago" title='2023-05-16'>2023-05-16</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/fangfa/223076602339131392">763</a> </div> </div> <div class="topic media topic-294939" data-prefetch="/connect/223076613674237952"> <div class="infos media-body"> <div class="title media-heading"> <a title="记录React使用connect后,ref.current为null问题及解决" target="_blank" href="/connect/223076613674237952">记录React使用connect后,ref.current为null问题及解决</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/930">Victoria</a> <abbr class="timeago" title='2023-05-16'>2023-05-16</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/connect/223076613674237952">1252</a> </div> </div> <div class="topic media topic-294941" data-prefetch="/fanxing/223076623316942848"> <div class="infos media-body"> <div class="title media-heading"> <a title="使用React.forwardRef传递泛型参数" target="_blank" href="/fanxing/223076623316942848">使用React.forwardRef传递泛型参数</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/192">Anna</a> <abbr class="timeago" title='2023-05-16'>2023-05-16</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/fanxing/223076623316942848">1932</a> </div> </div> <div class="topic media topic-294947" data-prefetch="/connect/223076651597037568"> <div class="infos media-body"> <div class="title media-heading"> <a title="react-redux的connect与React.forwardRef结合ref失效的解决" target="_blank" href="/connect/223076651597037568">react-redux的connect与React.forwardRef结合ref失效的解决</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/199">Kefira</a> <abbr class="timeago" title='2023-05-16'>2023-05-16</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/connect/223076651597037568">1954</a> </div> </div> <div class="topic media topic-294948" data-prefetch="/connect/223076656133177344"> <div class="infos media-body"> <div class="title media-heading"> <a title="解决react-connect中使用forwardRef遇到的问题" target="_blank" href="/connect/223076656133177344">解决react-connect中使用forwardRef遇到的问题</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/606">Jacinthe</a> <abbr class="timeago" title='2023-05-16'>2023-05-16</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/connect/223076656133177344">1756</a> </div> </div> <div class="topic media topic-294974" data-prefetch="/tihuan/223257774522368000"> <div class="infos media-body"> <div class="title media-heading"> <a title="react-router v6实现权限管理+自动替换页面标题的案例" target="_blank" href="/tihuan/223257774522368000">react-router v6实现权限管理+自动替换页面标题的案例</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/769">Elita</a> <abbr class="timeago" title='2023-05-17'>2023-05-17</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/tihuan/223257774522368000">774</a> </div> </div> <div class="topic media topic-295022" data-prefetch="/react/223438897435115520"> <div class="infos media-body"> <div class="title media-heading"> <a title="React Hooks 实现的中文输入组件" target="_blank" href="/react/223438897435115520">React Hooks 实现的中文输入组件</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/490">Tani</a> <abbr class="timeago" title='2023-05-18'>2023-05-18</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/react/223438897435115520">1776</a> </div> </div> <div class="topic media topic-295027" data-prefetch="/react/223438920830943232"> <div class="infos media-body"> <div class="title media-heading"> <a title="在React中this容易遇到的问题详解" target="_blank" href="/react/223438920830943232">在React中this容易遇到的问题详解</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/170">Viveka</a> <abbr class="timeago" title='2023-05-18'>2023-05-18</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/react/223438920830943232">841</a> </div> </div> <div class="topic media topic-295029" data-prefetch="/react/223438930016468992"> <div class="infos media-body"> <div class="title media-heading"> <a title="一文总结Vue和React的异同" target="_blank" href="/react/223438930016468992">一文总结Vue和React的异同</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/595">Karli</a> <abbr class="timeago" title='2023-05-18'>2023-05-18</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/react/223438930016468992">534</a> </div> </div> <div class="topic media topic-295037" data-prefetch="/react/223438968344018944"> <div class="infos media-body"> <div class="title media-heading"> <a title="React中完整实例讲解Recoil状态管理库的使用" target="_blank" href="/react/223438968344018944">React中完整实例讲解Recoil状态管理库的使用</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/365">Tia</a> <abbr class="timeago" title='2023-05-18'>2023-05-18</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/react/223438968344018944">1238</a> </div> </div> <div class="topic media topic-295276" data-prefetch="/android/233305282449506304"> <div class="avatar"> <a target="_blank" title="React Native之在Android上添加阴影的实现" href="/android/233305282449506304"><img class="media-object avatar-48" src="/upload/images/article/2023/07/f5368da835318b36ebfebd7532312867.jpg?x-oss-process=style/40x40" /></a> </div> <div class="infos media-body"> <div class="title media-heading"> <a title="React Native之在Android上添加阴影的实现" target="_blank" href="/android/233305282449506304">React Native之在Android上添加阴影的实现</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/808">Malinda</a> <abbr class="timeago" title='2023-07-11'>2023-07-11</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/android/233305282449506304">1841</a> </div> </div> <div class="topic media topic-295898" data-prefetch="/react/234854659970301952"> <div class="infos media-body"> <div class="title media-heading"> <a title="React18的useEffect执行两次如何应对" target="_blank" href="/react/234854659970301952">React18的useEffect执行两次如何应对</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/105">Jacinda</a> <abbr class="timeago" title='2023-07-20'>2023-07-20</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/react/234854659970301952">1731</a> </div> </div> <div class="topic media topic-295926" data-prefetch="/fangfa/234854784492896256"> <div class="infos media-body"> <div class="title media-heading"> <a title="React中使用TS完成父组件调用子组件的操作方法" target="_blank" href="/fangfa/234854784492896256">React中使用TS完成父组件调用子组件的操作方法</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/227">Nova</a> <abbr class="timeago" title='2023-07-20'>2023-07-20</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/fangfa/234854784492896256">547</a> </div> </div> <div class="topic media topic-295927" data-prefetch="/youhua/234854789377163264"> <div class="infos media-body"> <div class="title media-heading"> <a title="React渲染机制及相关优化方案" target="_blank" href="/youhua/234854789377163264">React渲染机制及相关优化方案</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/590">Beth</a> <abbr class="timeago" title='2023-07-20'>2023-07-20</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/youhua/234854789377163264">506</a> </div> </div> <div class="topic media topic-295944" data-prefetch="/native/234854868167163904"> <div class="infos media-body"> <div class="title media-heading"> <a title="React Native与iOS OC之间的交互示例详解" target="_blank" href="/native/234854868167163904">React Native与iOS OC之间的交互示例详解</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/194">Viridis</a> <abbr class="timeago" title='2023-07-20'>2023-07-20</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/native/234854868167163904">1213</a> </div> </div> <div class="topic media topic-295945" data-prefetch="/scroll/234854872317427712"> <div class="infos media-body"> <div class="title media-heading"> <a title="react中使用better-scroll滚动插件的实现示例" target="_blank" href="/scroll/234854872317427712">react中使用better-scroll滚动插件的实现示例</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/778">Georgia</a> <abbr class="timeago" title='2023-07-20'>2023-07-20</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/scroll/234854872317427712">712</a> </div> </div> <div class="topic media topic-295958" data-prefetch="/react/234854933541683200"> <div class="infos media-body"> <div class="title media-heading"> <a title="React中的useEffect四种用法分享" target="_blank" href="/react/234854933541683200">React中的useEffect四种用法分享</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/27">Shaine</a> <abbr class="timeago" title='2023-07-20'>2023-07-20</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/react/234854933541683200">917</a> </div> </div> <div class="topic media topic-295965" data-prefetch="/react/234854965707800576"> <div class="infos media-body"> <div class="title media-heading"> <a title="React在Dva项目中创建并引用页面局部组件的方式" target="_blank" href="/react/234854965707800576">React在Dva项目中创建并引用页面局部组件的方式</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/540">Isleta</a> <abbr class="timeago" title='2023-07-20'>2023-07-20</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/react/234854965707800576">940</a> </div> </div> <div class="topic media topic-295972" data-prefetch="/paixu/234854998647767040"> <div class="infos media-body"> <div class="title media-heading"> <a title="react实现记录拖动排序" target="_blank" href="/paixu/234854998647767040">react实现记录拖动排序</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/120">Jacinda</a> <abbr class="timeago" title='2023-07-20'>2023-07-20</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/paixu/234854998647767040">1927</a> </div> </div> </div> </div> </div> <div class="sidebar col-lg-3" id="sideright"> <div class="card"> <div class="card-body"> <a class="btn btn-primary btn-block" href="/user/tougao">我要提问</a> </div> </div> <div class="card"> <script src="/upload/common/right.js"></script> </div> <div class="card"> <h3 class="card-header">致谢</h3> <div class="card-body"> <p><b>帮助他人，成就自己。</b></p> <p>人生最大成功就是伸出热情而温暖的双手，尽自己所能去帮助身边的每一个人，只要无私的奉献，就会收获到美好的生活。</p> <p>1024问感谢每一位朋友的帮助和支持。</p> 软件开发网提供编程的基础软件技术培训教程,软件开发编程实例讲解Go,Node,HTML,CSS,Javascript,Python,Java,Ruby,C,PHP,MySQL等软件开发编程语言以及数据开发的基础知识，也提供大量的软件开发在线实例、从入门到精通就在1024问。 </div> </div> <div class="card"> <div class="card-body"> <div id="link"> <a href="https://www.pcbaby.cn/" target="_blank" >育儿网</a> <a href="https://www.wys.net/" target="_blank" >微养生</a> <a href="https://www.qqx.com/" target="_blank" >全球行</a> <a href="https://www.msj.com/" target="_blank" >美食街</a> <a href="http://www.baoerle.com/" target="_blank" >育儿</a> <a href="https://www.3meishi.com/" target="_blank" >菜谱大全</a> <a href="http://www.haihua365.com/" target="_blank" >海南旅游</a> <a href="https://www.163lady.com/" target="_blank" >女性</a> <a href="http://www.bubugou.com/" target="_blank" >养狗百科</a> <a href="http://www.xingzuo8090.com/" target="_blank" >星座</a> </div> <script> document.getElementById("l"+"i"+"n"+"k").style.display = "none"; </script> <script src="/upload/common/right1.js"></script> </div> </div> </div> </div> </div> <footer class="footer" id="footer" data-turbolinks-permanent> <div class="container"> <div class="media" data-turbolinks="false"> <div class="media-body"> <div class="copyright" style="margin-left: 15px"> © 2021 1024问 MIT <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备11031391号-29</a> </div> </div> </div> </div> </footer> <div class="zoom-overlay"></div> <script src="/upload/static/js/tongji.js"></script> <script> document.getElementById("u"+"p"+"da"+"te").style.display = "none"; </script> </body> </html>