[英]What's the React way to manipulate multiple elements according to event of another element?
I am confused about this for a long time. 我对此很困惑。
Here is the case: 就是这种情况:
1, I create a table with multiple rows, in this way: 1,我用这种方式创建一个包含多行的表:
tableRow(basicInfoArray) {
return basicInfoArray.map((basicInfo, index) => (
<tr
key={basicInfo._id}
className={index % 2 === 0 ? 'alt' : null}
onClick={event => this.props.showDetail(basicInfo._id, event)}
>
<td>{basicInfo.mentee_id}</td>
<td>{`${basicInfo.firstname} ${basicInfo.lastname}`}</td>
<td>{basicInfo.othername}</td>
<td>{basicInfo.location}</td>
</tr>
));
}
The question is here, after clicked on the backdrop(which bind a onClick event), the drilldown hide and I should remove the highlight effect from the row. 问题是在这里,单击背景(绑定了onClick事件)后,向下钻取隐藏,我应该从行中删除突出显示效果。 Currently I use this way:
目前,我使用这种方式:
const highLightRows = document.getElementsByClassName('highLight'); for (let i = 0; i < highLightRows.length; i += 1) { highLightRows[i].classList.toggle('highLight'); }
As the documents of React.js says that it's not a good practice to manipulate the dom directly, the UI change should be caused by the props/state change. 正如React.js的文档所述,直接操作dom不是一个好习惯,UI的改变应该由props / state的改变引起。 Obviously it's not a good idea to bind a state for each row of the table because of the quantity.
显然,由于数量原因,为表的每一行绑定一个状态不是一个好主意。 What's the best practice to do this?
最佳做法是什么?
It's important to keep in mind that react renders whatever you have in memory, in this case you have an array of items that you want to display in a table, when clicking any of those items you want to highlight the selected, right? 重要的是要记住,react会渲染您内存中的任何内容,在这种情况下,当您单击要突出显示所选内容的任何项目时,您要在表中显示一组项目。
Well, for that you could define a property in each element of the array called selected
, this property will be true/false depending on the user selection, then when rendering the row you will check for this property and if it's there you will assign the highLight
class or not. 好吧,为此,您可以在名为
selected
的数组的每个元素中定义一个属性,该属性将为true / false,具体取决于用户选择,然后在渲染该行时将检查该属性,如果存在,则将分配该属性。 highLight
类与否。 With this approach you will only need to worry to change the value of this property on memory and it will automatically get highlighted on the DOM. 使用这种方法,您只需要担心更改此属性在内存中的值,它将自动在DOM上突出显示。
Here's an example: 这是一个例子:
renderRow(info, index) {
const styles = [
index % 2 === 0 ? 'alt' : '',
info.selected = 'highLight' : '',
];
return (
<tr
key={info._id}
className={styles.join(' ')}
onClick={event => this.props.showDetail(info, event)}
>
<td>{basicInfo.mentee_id}</td>
<td>{`${info.firstname} ${info.lastname}`}</td>
<td>{info.othername}</td>
<td>{info.location}</td>
</tr>
);
}
renderContent(basicInfoArray) {
return basicInfoArray.map((basicInfo, index) => this.rendeRow(basicInfo, index));
}
Just make sure to set to true
the selected
property on showDetail
function, and then set to false
when you need to hide and remove the highLight
class. 只要确保将
showDetail
函数的selected
属性设置为true
,然后在需要隐藏和删除highLight
类时将其设置为false
highLight
。
Good luck! 祝好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.