[英]How to link a dropDown and Textarea in ReactJs
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 . 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 . 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 我相信对于TextArea我不应该使用Onchange,因为onChange会被调用,我在TextArea中键入的每个字符都会被调用
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>
PD: You can use classNames library to handle your conditional classNames PD:您可以使用classNames库来处理您的条件classNames
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.