Question

我有一张看起来像这样的表

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

var Tablefortask = React.createClass({

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

                              },
                              onChange: function (e) {

                                  var employeeId = e.target.value;
                                  alert(employeeId);

                                },

                              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} />
                                  </table>
                                  </div>
                                  </div>
                                );
                              }
                            });

var TablefortaskList = React.createClass({
                            render: function() {
                              var commentNodes = this.props.data.map(function(comment) {
                                return (
                                  <Addcontenttotable onChange= {this.props.onChange}  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() {
                              if(this.props.reviewComment=== "" && this.props.reviewRating === '' ){
                                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="form-control" 
                                                name="empComment"
                                                placeholder="Employee Comment"
                                                />
                                      </td>
                                      <td>
                                          <select  
                                                    className="form-control" 
                                                   onChange={this.props.onChange}
                                                   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>

                                );
                                }
                                else {
                                 return (
                                  <tr><td>{this.props.taskName}</td>
                                      <td>{this.props.standarDescription}</td>
                                      <td>{this.props.emplComment}</td>
                                      <td>{this.props.empRating}</td>
                                      <td>{this.props.reviewComment}</td>
                                      <td>{this.props.reviewRating}</td>
                                  </tr>
                                  );
                                }
                              }
                            });

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

这是一个小提琴LINK

我想要实现的是，

1。如果用户选择下拉列表，则应检查是否有评论评论，如果没有，则应突出显示评论部分。

2。同样如果用户写评论，它应该检查是否存在评级，如果不存在则应该高亮显示评级

我相信TextArea我不应该使用Onchange，因为onChange会调用我在TextArea中输入的每个字符

Answer 1

你甚至不需要一个函数来做到这一点，只需根据道具设置类。

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

设置你的课程

<textarea 
    className={textAreaClass} 
    onChange={this.props.onChangeTextArea}
     name="empComment"
    placeholder="Employee Comment" />

<select  
        className={comboClass} 
        onChange={this.props.onChange}
        data-placeholder="Basic Select2 Box" >
  </select>

jsfiddle

PD：您可以使用classNames库来处理条件classNames

如何在ReactJs中链接dropDown和Textarea

1 个答案: