javascript - 如何在 ReactJs 中追加到表中

Question

我有以下代码

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'));

我想在提交表单时向表中添加新行。

这是一个FIDDLE LINK

Answer 1

I have updated your code here to make it work

var Tableforbasictask = React.createClass({
  getInitialState: function() {
    return {data:this.props.data};
  },
  handleSubmit: function(comment){
    comment.id=this.state.data.length+1;
    this.setState({data:this.state.data.concat(comment)});
  },
  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.state.data
      }
      />  < /table> < TableforbasictaskForm onCommentSubmit={this.handleSubmit} / >
      < /div>
    );
  }
});

基本思想是 Tableforbasictask 组件拥有一个作为 props.data 传递给它的状态。该组件将传递其内部方法 handleSubmit 到 TableforbasictaskForm 作为 props.onCommentSubmit ，这将使用新评论更新 Tableforbasictask 的 状态。