在react中，如何使用onChange事件定位特定行？
在react中，如何使用onChange事件定位特定行？
提问于 2018-08-14 00:16:38
我有一个包含多行的表，并且每行的最后一列都有一个下拉列表，其中包含3个值Incomplete，Fail和Pass。如果选择下拉列表，我需要显示复选标记图标，如果选择下拉列表失败，则会显示错误图标。
以上逻辑似乎工作正常。但是如何只针对表的特定行，而不是对其他行有任何影响？我只想在我定位的行中显示图标。
例如，这是我当前的表格。它影响了两个行：
在此处输入图像描述
同样，对于其他失败选项：
在此处输入图像描述
我的代码：
this.state = {
...
test_steps: [],
status: ""
};
selectStatus(e) {
var selected = $('.status_list option:selected').text();
if(selected == "Pass") {
this.setState({status: e.target.value})
$('.checkmark').show();
$('.bug').hide();
$(".checkmark").css({"display": "inline", "marginLeft": "10px"});
} else if(selected == "Fail") {
this.setState({status: e.target.value})
$('.bug').show();
$('.checkmark').hide();
$(".bug").css({"display": "inline", "marginLeft": "10px"});
} else {
this.setState({status: e.target.value})
$('.checkmark').hide();
$('.bug').hide();
}
}
tsteps = test_steps.map((testStep, index) => {
return (
<tr key={index}>
<td>{testStep.step_number}</td>
<td>{testStep.description}</td>
<td>{testStep.expected_results}</td>
<td>{testStep.other_info}</td>
<td>
<select
className="status_list form-control"
id="status"
onChange={this.selectStatus.bind(this)} // calling selectStatus function
>
<option className={styles.emptyVal}></option>
<option>Incomplete</option>
<option>Fail</option>
<option>Pass</option>
</select>
<div className="checkmark" style={{display: 'none'}}>
<i className={`fas fa-check ${styles.check_icon}`}></i>
</div>
<div className="bug" style={{display: 'none'}}>
<i className={`fas fa-bug ${styles.bug_icon}`}></i>
</div>
{testStep.status}
</td>
</tr>
);
});
回答 1
Stack Overflow用户
发布于 2018-08-14 10:05:47
你可以在状态中存储状态数组，然后在选择选项时更新该特定索引。状态数组索引可以直接映射到行数组，因此你可以只使用已经更新数组的索引。
updateStatus(index, status) {
this.setState(prevState =>({
statuses: [
...prevState.statuses.slice(0, index),
status,
...prevState.statuses.slice(index)
]
})
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100002120
复制相关文章
相似问题