我有一张看起来像这样的桌子
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中输入的每个字符
I have a table which looks like this
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') );Here is a fiddle LINK
I am trying to achieve is ,
1 . If a user selects the drop down it should check if there is a comment for the rating or not , and if not it should highlight the Comment section .
2 . similarly If a user Writes a comment it should check if rating exist or not and if not it should High Light the Drop down
I believe for the TextArea I should not use Onchange since onChange will get called every character I type inside the TextArea
最满意答案
你甚至不需要一个函数来做到这一点,只需根据props设置类。
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
You don't even need a function to do that, just set the class based on the props.
var textAreaClass = this.props.reviewComment === "" && this.props.reviewRating !== "" ? "highlight" : ""; var comboClass = this.props.reviewComment !== "" && this.props.reviewRating === "" ? "highlight" : "";set your class
<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: You can use classNames library to handle your conditional classNames
更多推荐
发布评论