脚本宝典收集整理的这篇文章主要介绍了

react组件通信实现表单提交

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">react组件通信实现表单提交</h1> <blockquote> <p>昨晚做了一个react的例子,主要实现的是提交表单实现评论的功能,在做之前先简单介绍一下<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>。</p> </blockquote> <h2><span class="img-wrap"><img data-src="/img/bVRwyZ?w=671&amp;h=616" src="/img/bVRwyZ?w=671&amp;h=616" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></h2> <p><a href="https://facebook.github.io/react/" rel="nofollow noreferrer" target="_blank">React</a>、<a href="https://vuejs.org/" rel="nofollow noreferrer" target="_blank">vue</a>、<a href="https://angularjs.org/" rel="nofollow noreferrer" target="_blank">Angular</a>并称为前端3大框架,就目前来看,尽管<a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>发布了4.x也在今年3月份发布了,vue、<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>更不在话下,大家要是想学习的话可以去官网学习。可以直接点击上方名字,进去学习!</p> <h2 id="articleHeader2">准备</h2> <p>首先我们会应用到react组件,我们需要通过一款管理工具<strong>JSPM</strong>安装步骤请戳<a href="https://segmentfault.com/a/1190000010229588">https://segmentfault.com/a/1190000010229588</a><br />他是一款<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>的管理模块化的工具,大家可以去试试!</p> <h2 id="articleHeader3">起步</h2> <p>在git命令行内进行操作,需要安装git,并且在项目文件下进行启动!</p> <h3 id="articleHeader4">安装react:</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="jspm install react" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">jspm <span class="hljs-keyword"><a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>st<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a></span> react</code></pre> <h3 id="articleHeader5">安装react-<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>m</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="jspm install react-dom" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">jspm <span class="hljs-keyword">install</span> react-<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>m</code></pre> <h3 id="articleHeader6">安装一款ui控件</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="jspm install semantic-ui" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">jspm <span class="hljs-keyword">install</span> semantic-ui</code></pre> <h3 id="articleHeader7">jspm插件 css</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="jspm install css" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">jspm <span class="hljs-keyword">install</span> css</code></pre> <h3 id="articleHeader8">监控项目 (jspm必须起一个web环境)</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="browser-sync start --server --no-notify --files 'index.html,js/**/*.js'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code style="word-break: break-word; white-space: initial;">browser-sync start --server --no-not<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>y --files <span class="hljs-symbol">'index</span>.html,js<span class="hljs-comment">/**/</span>*.js'</code></pre> <p>我们需要创建下边几个项目目录</p> <p><span class="img-wrap"><img data-src="/img/bVRwzw?w=155&amp;h=311" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="![image](http://note.youdao.com/favicon.ico)" title="![image](http://note.youdao.com/favicon.ico)" style="cursor: pointer;"></span></p> <p>在<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex.html文件中引入我们的文件,创建我们的渲染<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>m</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="</p> <div class=&quot;ui container&quot; style=&quot;padding:30px&quot;> <div id=&quot;app&quot;></div> </div> <p><script src=&quot;jspm_packages/system.js&quot;></script><br /> <script src=&quot;config.js&quot;></script><br /> <script> System.<a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a>(&quot;js/ma<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>&quot;) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ui container"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding:30px"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jspm_<a href="http://www.js-code.com/tag/packages" title="浏览关于“packages”的文章" target="_blank" class="tag_link">packages</a>/system.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"config.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> System.import(<span class="hljs-string">"js/main"</span>) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h4>在main.js中我们需要引入我们需要的模块</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="'use strict';</p> <p><a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> 'semantic-ui/semantic.min.css!';<br /> import <a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a> from 'react';<br /> import React<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> from 'react-dom';<br /> import CommentBox from './comment/CommentBox';</p> <p>React<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>.render(<br /> <CommentBox url=&quot;js/comments.json&quot;></span>,<br /> document.getElementById('app')<br /> );" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-meta">'use strict'</span>; <span class="hljs-keyword">import</span> <span class="hljs-string">'semantic-ui/semantic.min.css!'</span>; <span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>; <span class="hljs-keyword">import</span> React<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>; <span class="hljs-keyword">import</span> CommentBox <span class="hljs-keyword">from</span> <span class="hljs-string">'./comment/CommentBox'</span>; ReactDOM.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">CommentBox</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"js/comments.json"</span>/&gt;</span>, <a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a>.getElementById('app') );</span></code></pre> <p>CommentBox.js、CommentList.js、CommentForm、Comment.js模块使我们整个表单的模块,其中commnetBox.js模块使我们的主模块,其他的是我们的区块模板。<br />我们需要</p> <h4>CommentList模块</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="'use strict'; import React from 'react'; import Comment from './Comment'; class CommentList extends React.Component{ render(){ let commentNodes=this.props.data.map(comment =>{<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> (<br /> <Comment author={comment.author} date={comment.date}><br /> {comment.<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>}<br /> </Comment><br /> );<br /> });<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> (</p> <div> {commentNodes} </div> <p> );<br /> }</p> <p> }</p> <p> export { CommentList as default}; //加载到默认的模板" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-meta">'use strict'</span>; <span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>; <span class="hljs-keyword">import</span> Comment <span class="hljs-keyword">from</span> <span class="hljs-string">'./Comment'</span>; <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CommentList</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/extends" title="浏览关于“extends”的文章" target="_blank" class="tag_link">extends</a></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{ render(){ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> commentNodes=<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.props.data.map(<span class="hljs-function"><span class="hljs-params">comment</span> =&gt;</span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Comment</span> <span class="hljs-attr">author</span>=<span class="hljs-string">{comment.author}</span> <span class="hljs-attr">date</span>=<span class="hljs-string">{comment.date}</span>&gt;</span> {comment.text} <span class="hljs-tag">&lt;/<span class="hljs-name">Comment</span>&gt;</span></span> ); }); <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> {commentNodes} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> ); } } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> { CommentList <span class="hljs-keyword">as</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></span>}; <span class="hljs-comment">//加载到默认的模板</span></code></pre> <h4>comment模板</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-text="'use strict';<br /> import React from 'react';</p> <p> class Comment <a href="http://www.js-code.com/tag/extends" title="extends" target="_blank">extends</a> React.Component{<br /> render(){<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> (</p> <div className=&quot;comment&quot;> <div className=&quot;content&quot;> <span className=&quot;author&quot;>{<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.author}</span></p> <div className=&quot;metadate&quot;> <span className=&quot;date&quot;>{<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.date}</span> </div> <div className=&quot;text&quot;>{<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.children}</div> </p></div> </p></div> <p> //我们的项目评论区的模板<br /> )<br /> }<br /> }</p> <p>export { Comment as default }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-meta">'use strict'</span>; <span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>; <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Comment</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{ render(){ <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"comment"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"content"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"author"</span>&gt;</span>{this.props.author}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"metadate"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"date"</span>&gt;</span>{this.props.date}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"text"</span>&gt;</span>{this.props.children}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> <span class="hljs-comment">//我们的项目评论区的模板</span> ) } } <span class="hljs-keyword">export</span> { Comment <span class="hljs-keyword">as</span> <span class="hljs-keyword">default</span> }</code></pre> <h4>CommentForm</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="'use strict'; import React from 'react'; class CommentForm <a href="http://www.js-code.com/tag/extends" title="extends" target="_blank">extends</a> React.Component{<br /> handleSumbit(<a href="http://www.js-code.com/tag/event" title="event" target="_blank">event</a>){<br /> <a href="http://www.js-code.com/tag/event" title="event" target="_blank">event</a>.pr<a href="http://www.js-code.com/tag/event" title="浏览关于“event”的文章" target="_blank" class="tag_link">event</a>Default();<br /> console.log(&quot;提交表单...&quot;);<br /> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> author = <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.refs.author.value,<br /> text= <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.refs.text.value;<br /> console.log(author,text);<br /> <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.onCommentSubmit({author,text,date:'刚刚'});<br /> }<br /> render(){<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> (</p> <form className=&quot;ui reply form&quot; onSubmit={this.handleSumbit.bind(this)}> <div className=&quot;field&quot;> <input type=&quot;text&quot; placeholder=&quot;姓名&quot; ref=&quot;author&quot;/> </div> <div className=&quot;field&quot;> <textarea placeholder=&quot;评论&quot; ref=&quot;text&quot;></textarea> </div> <p> <button type=&quot;submit&quot; className=&quot;ui blue button&quot;><br /> 添加评论<br /> </button><br /> </form> <p> )<br /> }</p> <p> }</p> <p> export { CommentForm as default};" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-meta">'use strict'</span>; <span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>; <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CommentForm</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{ handleSumbit(event){ event.preventDefault(); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"提交表单..."</span>); <span class="hljs-keyword">let</span> author = <span class="hljs-keyword">this</span>.refs.author.value, text= <span class="hljs-keyword">this</span>.refs.text.value; <span class="hljs-built_in">console</span>.log(author,text); <span class="hljs-keyword">this</span>.props.onCommentSubmit({author,text,<span class="hljs-attr">date</span>:<span class="hljs-string">'刚刚'</span>}); } render(){ <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a></span> <span class="hljs-attr">className</span>=<span class="hljs-string">"ui reply <a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>m"</span> <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">{this.handleSumbit.bind(this)}</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"field"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"姓名"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"author"</span>/&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"field"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/textarea" title="浏览关于“textarea”的文章" target="_blank" class="tag_link">textarea</a></span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"评论"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"text"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">text<a href="http://www.js-code.com/tag/area" title="浏览关于“area”的文章" target="_blank" class="tag_link">area</a></span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/submit" title="浏览关于“submit”的文章" target="_blank" class="tag_link">submit</a>"</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"ui blue button"</span>&gt;</span> 添加评论 <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span> ) } } export { CommentForm as default};</span></code></pre> <h4>CommentBox(主文件)</h4> <p>这里我们需要引入jquery</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="jspm install jquery" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">jspm <span class="hljs-keyword">install</span> jquery</code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;use strict&quot;; import React from 'react'; import CommentList from './CommentList'; import CommentForm from './CommentForm'; import $ from 'jquery'; //可以使用jspm安装jquery class CommentBox extends React.Component{ constructor(props){ super(props); this.state={data:[]}; this.getComments(); //setInterval(()=>this.getComments(),5000);<br /> }<br /> handleCommentSumit(comment){<br /> let comments=this.state.data,<br /> newComments =comments.concat(comment);<br /> this.setState({data:newComments})<br /> }<br /> getComments(){<br /> $.ajax({<br /> url:this.props.url,<br /> dataType:'json',<br /> cache:false,<br /> success_comments=>{<br /> this.set<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>({data:comments});<br /> }<br /> })<br /> }<br /> render() {<br /> return (</p> <div className=&quot;ui comments&quot;> <h1>评论</h1> <div className=&quot;ui divider&quot;></div> <p> <CommentList data={this.state.data}></CommentList><br /> <CommentForm onCommentSubmit={this.handleCommentSumit.bind(this)}></CommentForm> </div> <p> );<br /> }<br /> }<br /> export { CommentBox as default };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code><span class="hljs-string">"use strict"</span>; <span class="hljs-keyword">import</span> React from <span class="hljs-string">'react'</span>; <span class="hljs-keyword">import</span> CommentList from <span class="hljs-string">'./CommentList'</span>; <span class="hljs-keyword">import</span> CommentForm from <span class="hljs-string">'./CommentForm'</span>; <span class="hljs-keyword">import</span> $ from <span class="hljs-string">'jquery'</span>; <span class="hljs-comment">//可以使用jspm安装jquery</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CommentBox</span> <span class="hljs-title">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/constructor" title="浏览关于“constructor”的文章" target="_blank" class="tag_link">constructor</a></span>(props){ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/super" title="浏览关于“super”的文章" target="_blank" class="tag_link">super</a></span>(props); <span class="hljs-keyword">this</span>.state={<span class="hljs-keyword">data</span>:[]}; <span class="hljs-keyword">this</span>.getComments(); <span class="hljs-comment">//<a href="http://www.js-code.com/tag/setInterval" title="浏览关于“setInterval”的文章" target="_blank" class="tag_link">setInterval</a>(()=&gt;this.getComments(),5000);</span> } handleCommentSumit(comment){ let comments=<span class="hljs-keyword">this</span>.state.<span class="hljs-keyword">data</span>, <a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a>Comments =comments.concat(comment); <span class="hljs-keyword">this</span>.<a href="http://www.js-code.com/tag/setstate" title="浏览关于“setState”的文章" target="_blank" class="tag_link">setState</a>({<span class="hljs-keyword">data</span>:newComments}) } getComments(){ $.ajax({ url:<span class="hljs-keyword">this</span>.props.url, dataType:<span class="hljs-string">'json'</span>, cache:<span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span>, success_comments=&gt;{ <span class="hljs-keyword">this</span>.set<a href="http://www.js-code.com/tag/state" title="浏览关于“State”的文章" target="_blank" class="tag_link">State</a>({<span class="hljs-keyword">data</span>:comments}); } }) } render() { <span class="hljs-keyword">return</span> ( &lt;div className=<span class="hljs-string">"ui comments"</span>&gt; &lt;h1&gt;评论&lt;/h1&gt; &lt;div className=<span class="hljs-string">"ui divider"</span>&gt;&lt;/div&gt; &lt;CommentList <span class="hljs-keyword">data</span>={<span class="hljs-keyword">this</span>.state.<span class="hljs-keyword">data</span>}/&gt; &lt;CommentForm onCommentSubmit={<span class="hljs-keyword">this</span>.handleCommentSumit.bind(<span class="hljs-keyword">this</span>)}/&gt; &lt;/div&gt; ); } } export { CommentBox <span class="hljs-keyword">as</span> <span class="hljs-keyword">default</span> };</code></pre> <p>我们还需要配置json文件进行模拟项目,上边的方法中我们已经调试!</p> <h4>Comments.json</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="[ {&quot;author&quot;:&quot;赵晨旭&quot;,&quot;date&quot;:&quot;5 分钟前&quot;,&quot;text&quot;:&quot;天气不错啊!&quot;}, {&quot;author&quot;:&quot;小雪&quot;, &quot;date&quot;:&quot;3 分钟前&quot;,&quot;text&quot;:&quot;出去玩啊!&quot;}, {&quot;author&quot;:&quot;小东&quot;, &quot;date&quot;:&quot;2 分钟前&quot;,&quot;text&quot;:&quot;全军出击&quot;} ]" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs json"><code>[ {<span class="hljs-attr">"author"</span>:<span class="hljs-string">"赵晨旭"</span>,<span class="hljs-attr">"date"</span>:<span class="hljs-string">"5 分钟前"</span>,<span class="hljs-attr">"text"</span>:<span class="hljs-string">"天气不错啊!"</span>}, {<span class="hljs-attr">"author"</span>:<span class="hljs-string">"小雪"</span>, <span class="hljs-attr">"date"</span>:<span class="hljs-string">"3 分钟前"</span>,<span class="hljs-attr">"text"</span>:<span class="hljs-string">"出去玩啊!"</span>}, {<span class="hljs-attr">"author"</span>:<span class="hljs-string">"小东"</span>, <span class="hljs-attr">"date"</span>:<span class="hljs-string">"2 分钟前"</span>,<span class="hljs-attr">"text"</span>:<span class="hljs-string">"全军出击"</span>} ]</code></pre> <p>通过这些我们就可以实现<a href="http://www.js-code.com/tag/react%e7%bb%84%e4%bb%b6" title="React组件" target="_blank">React组件</a>间的通信!state、props等</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

react组件通信实现表单提交

全部内容,希望文章能够帮你解决

react组件通信实现表单提交

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过