zoukankan      html  css  js  c++  java
  • 前端-【学习心得】-react4 表单提交

    // tutorial15.js

    var CommentForm = React.createClass(

    { render: function() { return (      <form className="commentForm">      <input type="text" placeholder="Your name" />      <input type="text" placeholder="Say something..." />      <input type="submit" value="Post" />      </form> ); }});

    如上,构建一个表单。

    接下来为表单增加提交处理的函数。

    // tutorial16.js

    var CommentForm = React.createClass({ handleSubmit: function(e) {e.preventDefault();var author = this.refs.author.getDOMNode().value.trim();var text = this.refs.text.getDOMNode().value.trim();if (!text || !author) {return;}// TODO: send request to the serverthis.refs.author.getDOMNode().value = '';this.refs.text.getDOMNode().value = '';return;}, render: function() { return (      <form className="commentForm" onSubmit={this.handleSubmit}>     <input type="text" placeholder="Your name" ref="author" />     <input type="text" placeholder="Say something..." ref="text" />     <input type="submit" value="Post" /> </form> ); 

    }

    });

     

    这里在createClass内部创建一个handleSubmit的函数,然后form元素绑定这个函数 绑定事件是onSubmit

    提交表单后需要更新数据,这部分工作需要在父组件中完成,那么如何完成这种数据传递?

    // tutorial17.js

         var CommentBox = React.createClass({

             loadCommentsFromServer: function() {

                   $.ajax(

                   { 

                     url: this.props.url, 

                     dataType: 'json',

                     success: function(data) {

                        this.setState({data: data}); }.bind(this),

                        error: function(xhr, status, err) { 

                             console.error(this.props.url, status, err.toString()); }.bind(this) }); },         handleCommentSubmit: function(comment) {                          // TODO: submit to the server and refresh the list                          },          getInitialState: function() { return {data: []}; }, 

             componentDidMount: function() { this.loadCommentsFromServer(); setInterval(this.loadCommentsFromServer, this.props.pollInterval); }, 

             render: function() {

              return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data} />           <CommentForm onCommentSubmit={this.handleCommentSubmit} />           </div> ); 

              }

         });

    到这里先不太要看上面的那个CommentForm,我们重新改第二个版本,那个监听事件肯定要改了。

    // tutorial18.js

    var CommentForm = React.createClass({ 

         handleSubmit: function(e) { 

              e.preventDefault(); 

              var author = this.refs.author.getDOMNode().value.trim(); 

              var text = this.refs.text.getDOMNode().value.trim(); 

              if (!text || !author) { return; }           this.props.onCommentSubmit({author: author, text: text});          this.refs.author.getDOMNode().value = ''; 

              this.refs.text.getDOMNode().value = ''; return; },

         render: function() { 

                   return ( 

                   <form className="commentForm" onSubmit={this.handleSubmit}> 

                   <input type="text" placeholder="Your name" ref="author" />

                   <input type="text" placeholder="Say something..." ref="text" /> 

                   <input type="submit" value="Post" /> </form> ); }

         });

    看重点标注的段落内部组件控制数据的验证然后调用外部组件的方法提交表单,外部表单更新数据。

    //完整的例子:

    // tutorial19.js

    var CommentBox = React.createClass({ 

         loadCommentsFromServer: function() { 

              $.ajax({

                   url: this.props.url, 

                   dataType: 'json', 

                   success: function(data) { this.setState({data: data}); }.bind(this), 

                   error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, 

            handleCommentSubmit: function(comment) {           $.ajax({                url: this.props.url,                dataType: 'json',                type: 'POST',                data: comment,                success: function(data) {                this.setState({data: data});               }.bind(this),                error: function(xhr, status, err) {                console.error(this.props.url, status, err.toString());                }.bind(this)           });           },

          getInitialState: function() { 

              return {data: []}; },

           componentDidMount: function() { 

              this.loadCommentsFromServer(); 

              setInterval(this.loadCommentsFromServer, this.props.pollInterval); },

              render: function() {

              return ( <div className="commentBox"> <h1>Comments</h1>

              <CommentList data={this.state.data} /> 

              <CommentForm onCommentSubmit={this.handleCommentSubmit} /> 

              </div> ); }

          });

     

    到现在组件基本完成了,唯一不足的是感觉起来慢,因为你需要等数据结果返回才能拿到最后效果,所以还需要在数据返回前先加入刚刚要提交到后台的数据,让它看起来像很快的样子。

    // tutorial20.js

         var CommentBox = React.createClass({ 

              loadCommentsFromServer: function() { 

                   $.ajax(

                        { 

                        url: this.props.url,

                        dataType: 'json', 

                        success: function(data) {

                             this.setState({data: data}); }.bind(this),

                        error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); },

              handleCommentSubmit: function(comment) {                    var comments = this.state.data;                    var newComments = comments.concat([comment]);                     this.setState({data: newComments});                     $.ajax(

                        { 

                        url: this.props.url,

                        dataType: 'json', 

                        type: 'POST', 

                        data: comment, 

                        success: function(data) { this.setState({data: data}); }.bind(this), 

                        error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); },

                        getInitialState: function() { return {data: []}; },

                        componentDidMount: function() { 

                             this.loadCommentsFromServer(); 

                             setInterval(this.loadCommentsFromServer, this.props.pollInterval); },

              render: function() { return ( 

                   <div className="commentBox"> 

                   <h1>Comments</h1>

                   <CommentList data={this.state.data} />

                   <CommentForm onCommentSubmit={this.handleCommentSubmit} /> </div> ); 

              }});

     

    ok到这里你已经做出了一个reactbox,接下来探讨下为什么使用react.

  • 相关阅读:
    iOSS--生成有logo的二维码
    inux网卡与MAC地址绑定方法总结
    Linux--多网卡的7种Bond模式
    Arp攻击实战
    5款免费Windows远程连接Linux桌面软件(VNC客户端)
    DenyHosts安装及配置
    Cacti完全使用手册 ( 让你快速个性化使用Cacti )
    解除被DenyHosts锁定的IP地址
    linux防止sshd被爆破(安装denyhosts)
    实现水电气一卡通 IC卡扇区分配
  • 原文地址:https://www.cnblogs.com/wq123/p/4396438.html
Copyright © 2011-2022 走看看