Fatal编程技术网
  • javascript/
  • Javascript 如何在ReactJs中追加到表

Javascript 如何在ReactJs中追加到表

javascript jquery reactjs

Javascript 如何在ReactJs中追加到表,javascript,jquery,reactjs,Javascript,Jquery,Reactjs,我有以下代码 var data = [{ id: 1, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating: "1" }, { id: 2, taskName: "Pete Hunt", standarDescription: "This is one comment", emplCommen

我有以下代码

var data = [{
  id: 1,
  taskName: "Pete Hunt",
  standarDescription: "This is one comment",
  emplComment: "meaaow I am meeawo",
  empRating: "1"
}, {
  id: 2,
  taskName: "Pete Hunt",
  standarDescription: "This is one comment",
  emplComment: "meaaow I am meeawo",
  empRating: "1"
}, {
  id: 3,
  taskName: "Pete Hunt",
  standarDescription: "This is one comment",
  emplComment: "meaaow I am meeawo",
  empRating: "1"
}, {
  id: 4,
  taskName: "Pete Hunt",
  standarDescription: "This is one comment",
  emplComment: "meaaow I am meeawo",
  empRating: "1"
}, {
  id: 5,
  taskName: "Pete Hunt",
  standarDescription: "This is one comment",
  emplComment: "meaaow I am meeawo",
  empRating: "1"
}];



var TableforbasictaskForm = React.createClass({

  getInitialState: function() {
    return {
      taskName: '',
      description: '',
      empComment: '',
      emprating: ''
    };
  },
  handletaskNameChange: function(e) {
    this.setState({
      taskName: e.target.value
    });
  },
  handledescriptionChange: function(e) {
    this.setState({
      description: e.target.value
    });
  },
  handleempCommentChange: function(e) {
    this.setState({
      empComment: e.target.value
    });
  },
  handleempratingChange: function(e) {
    this.setState({
      emprating: e.target.value
    });
  },

  handleSubmit: function(e) {
    e.preventDefault();

    var taskName = this.state.taskName.trim();
    var description = this.state.description.trim();
    var empComment = this.state.empComment.trim();
    var emprating = this.state.emprating;

    if (!taskName || !description || !empComment || !emprating) {
      alert('all the field have to be field');
      return;
    }

    this.props.onCommentSubmit({
      taskName: taskName,
      description: description,
      empComment: empComment,
      emprating: emprating
    });

    this.setState({
      taskName: '',
      description: '',
      empComment: '',
      emprating: ''
    });
  },

  render: function() {
    return ( < div className = "row margin-bottom" >
      < form className = "col-md-12"
      onSubmit = {
        this.handleSubmit
      } >
      < div className = "col-md-2" >
      < input className = "form-control "
      type = "text"
      placeholder = "Task name"
      value = {
        this.state.taskName
      }
      onChange = {
        this.handletaskNameChange
      }
      /> < /div> < div className = "col-md-3" >
      < textarea className = "form-control"
      name = "description"
      placeholder = "Standard Discription of task"
      value = {
        this.state.description
      }
      onChange = {
        this.handledescriptionChange
      }
      /> < /div> < div className = "col-md-3" >
      < textarea className = "form-control"
      name = "empComment"
      placeholder = "Employee Comment"
      value = {
        this.state.empComment
      }
      onChange = {
        this.handleempCommentChange
      }
      /> < /div>

      < div className = "col-md-2" >
      < select className = "form-control"
      name = "emprating"
      value = {
        this.state.emprating
      }
      onChange = {
        this.handleempratingChange
      } >
      < option value = "" > Employee Ratings < /option> < option value = "1" > 1 < /option> < option value = "2" > 2 < /option> < option value = "3" > 3 < /option> < option value = "4" > 4 < /option> < option value = "5" > 5 < /option> < /select> < /div> < div className = "col-md-2" >
      < input className = "form-control"
      type = "submit"
      value = "Post" / >
      < /div> < /form> < /div>
    );
  }
});

var Addcontenttotable = React.createClass({
  render: function() {
    return ( < tr > < td > {
      this.props.taskName
    } < /td> < td > {
      this.props.standarDescription
    } < /td> < td > {
      this.props.emplComment
    } < /td> < td > {
      this.props.empRating
    } < /td> < /tr>);
  }
});

var TableforbasictaskList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function(comment) {
      return ( < Addcontenttotable taskName = {
          comment.taskName
        }
        standarDescription = {
          comment.standarDescription
        }
        emplComment = {
          comment.emplComment
        }
        empRating = {
          comment.empRating
        }
        key = {
          comment.id
        } >
        < /Addcontenttotable>
      );
    });
    return ( < tbody > {
      commentNodes
    } < /tbody>);
  }
});

var Tableforbasictask = React.createClass({
  render: function() {
    return ( < div className = "downloadlinks" >
      < table className = "table table-bordered table-striped-col nomargin"
      id = "table-data" >
      < thead >
      < tr align = "center" >
      < td > Task Name < /td> < td > Standard Discription of Task < /td> < td > Employee Comment < /td> < td > Employee rating < /td> < /tr> < /thead>

      < TableforbasictaskList data = {
        this.props.data
      }
      />  < /table> < TableforbasictaskForm / >
      < /div>
    );
  }
});
ReactDOM.render( < div className="row"> < Tableforbasictask data = {
    data
  }
  /></div > , document.getElementById('content'));

var数据=[{
id:1，
任务名称：“皮特·亨特”，
标准描述：“这是一条评论”，
员工评论：“我是meeawo”，
开发：“1”
}, {
id:2，
任务名称：“皮特·亨特”，
标准描述：“这是一条评论”，
员工评论：“我是meeawo”，
开发：“1”
}, {
id:3，
任务名称：“皮特·亨特”，
标准描述：“这是一条评论”，
员工评论：“我是meeawo”，
开发：“1”
}, {
id:4，
任务名称：“皮特·亨特”，
标准描述：“这是一条评论”，
员工评论：“我是meeawo”，
开发：“1”
}, {
id:5，
任务名称：“皮特·亨特”，
标准描述：“这是一条评论”，
员工评论：“我是meeawo”，
开发：“1”
}];
var TableforbasictaskForm=React.createClass({
getInitialState:函数（）{
返回{
任务名：“”，
说明：“”，
注释：“”，
开发：''
};
},
手工艺：功能（e）{
这是我的国家({
任务名称：e.target.value
});
},
handledescriptionChange:功能（e）{
这是我的国家({
描述：e.target.value
});
},
handleempCommentChange:函数（e）{
这是我的国家({
注释：e.target.value
});
},
handleempratingChange:功能（e）{
这是我的国家({
开发：即目标值
});
},
handleSubmit:函数（e）{
e、 预防默认值（）；
var taskName=this.state.taskName.trim（）；
var description=this.state.description.trim（）；
var empComment=this.state.empComment.trim（）；
var emprating=this.state.emprating；
如果（！taskName | | |！description | |！empComment | |！emprating）{
警报（“所有字段必须为字段”）；
回来
}
this.props.onCommentSubmit({
taskName:taskName，
描述：描述，
empComment:empComment，
emprating：emprating
});
这是我的国家({
任务名：“”，
说明：“”，
注释：“”，
开发：''
});
},
render:function（）{
返回（