如何在ReactJs中链接dropDown和Textarea(How to link a dropDown and Textarea in ReactJs)

如何在ReactJs中链接dropDown和Textarea(How to link a dropDown and Textarea in ReactJs)

我有一张看起来像这样的桌子

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