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

现在我想保存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);
 }
}

但每次我对其他行进行更改时，函数saveReviewerRating都会触发，如果有多行，我知道这种情况正在发生，因为我在渲染函数中调用了它，

所以我的问题是我可以在哪里实施它？

Answer 1

每次评论或评论更改时，您在组件树中可以执行的操作是保存到数据库中。
您不应该做的是仅基于props保存到数据库。如果你只需要道具来决定是否保存，那么这个函数不属于组件，而是属于计算道具的地方。

以下是我认为您的代码的目的：

<TablefortaskList>组件包含整个表格，包括每行的评论和评论，并将其置于状态。
对于每一行，<TablefortaskList>都会呈现一个（无状态）<Addcontenttotable>组件。
此<Addcontenttotable>有两个输入字段，用户可以编辑
如果编辑了任一输入字段，<Addcontenttotable>将调用父项上的函数，以更新状态。
在每个更改事件中，父级应检查 - 对于该行 - 是否填充了两个字段。如果是，则应调用外部saveReviewerRating()函数，以更新数据库中该行的两个字段。

为此，您需要进行以下更改：

将saveReviewerRating放在父级中，并使其评估特定行：

saveReviewerRating:function(index){
  if(this.state.data[index].reviewComment !== "" 
     &&  this.state.data[index].reviewRating !== "")
  {
    console.log('saving');
    console.log(index);
  }
},

更改两个更改功能中的setState()，以包含回调，如下所示：

this.setState(
  {data: temp}, 
  () => {this.saveReviewerRating(index)}  // double arrow to pass index to function
)

然后它应该工作。

如何获取输入文本的详细信息并将其发送到ReactJs中

1 个答案: