如何ReactJs

Question

链接的下拉和TextArea我有一个表，看起来像这样

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库来处理你的条件的类名