如何在ReactJS中保存数据库

Question

我的表格看起来像这样

var dataW = [
  {
    id: 1,
    taskName: 'WWWx',
    standarDescription: 'WWW',
    emp_comment: 'WW',
    empRating: '1',
    review_comment: '',
    review_rating: '',
  }

]

var Tablefortask = React.createClass({

  getInitialState: function () {
    return {data: dataW};

  },
  onChange: function (index, event) {
    console.log(event)
    let temp = Object.assign([], this.state.data);
    temp[index].review_rating = event.target.value;
    this.setState({data: temp});
    console.log(index);

  },
  onChangeTextArea: function (index, event) {
    let temp = Object.assign([], this.state.data);
    temp[index].review_comment = event.target.value
    this.setState({data: temp})
  },

  render: function () {
    return (
      <div className="border-basic-task col-md-12">
        <div className="col-md-12">
          <table className="table table-condensed table-bordered table-striped-col " id="table-data">
            <thead>
            <tr align="center">
              <th>Task Name</th>
              <th >Standard Discription of Task</th>
              <th>Employee Comment</th>
              <th >Employee Rating</th>
              <th width="30%">Reviewer Comment</th>
              <th >Reviewer Rating</th>
            </tr>
            </thead>
            <TablefortaskList data={this.state.data} onChange={this.onChange} onChangeTextArea={this.onChangeTextArea}/>
          </table>
        </div>
      </div>
    );
  }
});

var TablefortaskList = React.createClass({
  render: function () {
    var commentNodes = this.props.data.map(function (comment, index) {
      return (
        <Addcontenttotable index={index} onChange={this.props.onChange} onChangeTextArea={this.props.onChangeTextArea}
                           taskid={comment.id} taskName={comment.taskName}
                           standarDescription={comment.standarDescription} emplComment={comment.emp_comment}
                           empRating={comment.empRating} key={comment.id} reviewComment={comment.review_comment}
                           reviewRating={comment.review_rating}>
        </Addcontenttotable>
      );
    }, this);
    return (
      <tbody>{commentNodes}</tbody>
    );
  }
});


var Addcontenttotable = React.createClass({
  render: function () {
    var textAreaClass = this.props.reviewComment === "" && this.props.reviewRating !== "" ? "highlight" : "";
    var comboClass = this.props.reviewComment !== "" && this.props.reviewRating === "" ? "highlight" : "";
    return (
      <tr>
        <td>{this.props.taskName}</td>
        <td>{this.props.standarDescription}</td>
        <td>{this.props.emplComment}</td>
        <td width="5%">{this.props.empRating}</td>
        <td ><textarea
          className={textAreaClass}
          onChange={(e) => this.props.onChangeTextArea(this.props.index, e)}
          name="empComment"
          placeholder="Employee Comment"
        />
        </td>
        <td>
          <select
            className={comboClass}
            onChange={(e) => this.props.onChange(this.props.index, e)}
            data-placeholder="Basic Select2 Box">
            <option value="">Option</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>
        </td>
      </tr>   
    );
  }
});


ReactDOM.render(
  <Tablefortask />,
  document.getElementById('container')
);

所以在这个表中，我正在检查当前行的值是否在文本框中填充并下拉，如果没有，那么我突出显示相应的一个

var textAreaClass = this.props.reviewComment === "" &&  this.props.reviewRating !== "" ? "highlight" : "";
var comboClass = this.props.reviewComment !== "" &&  this.props.reviewRating === "" ? "highlight" : "";

现在我想保存Textarea中的数据，如果当前行都填充了数据库，则下拉到datatbase。

我试过这样做

saveReviewerRating: function (index) {
  if (this.props.reviewComment !== "" && this.props.reviewRating !== "") {
    console.log('saving');
    console.log(index);
  }
}
,
render: function () {
  var textAreaClass = this.props.reviewComment === "" && this.props.reviewRating !== "" ? "highlight" : "";
  var comboClass = this.props.reviewComment !== "" && this.props.reviewRating === "" ? "highlight" : "";
  this.saveReviewerRating(this.props.index);
}

但每次我对其他行进行更改时都会触发，如果有多行