javascript - 什么是反应方式来做到这一点?
问题描述
我有一个非常基本的场景,我有一堆可选择/可点击的元素,并且想要突出显示最后选择/点击的元素。这是我的 jquerish 版本,我将特定的 css 类添加到所选元素,并从其兄弟姐妹中删除该类。有没有更好的方法来使用 React 做到这一点?
function Controls(props) {
const getSiblings = (element) => {
let siblings = [];
if (!element.parentNode) {
return siblings;
}
let sibling = element.parentNode.firstChild;
while (sibling) {
if (sibling.nodeType === 1 && sibling !== element) {
siblings.push(sibling);
}
sibling = sibling.nextSibling;
}
return siblings;
};
const handleClick = (event) => {
event.target.classList.add("symbol-preview-selected");
let siblings = getSiblings(event.target);
siblings.map((e) => {
e.classList.remove("symbol-preview-selected")
});
};
return(
<div className="grid-control-container">
<div className="flex-row-container">
<span style={{marginRight: "4px"}}>Color:</span>
<div className="flex-row-container">
{[...Array(10).keys()].map((i) => <div className={`symbol-preview symbol-`+i} onClick={handleClick} key={i.toString()}/>)}
</div>
</div>
</div>
);
}
解决方案
将点击的元素索引改为状态。
function Controls(props) {
const [selectedIndex, setSelectedIndex] = useState(-1);
const makeHandleClick = i => () => {
setSelectedIndex(i);
};
return (
<div className="grid-control-container">
<div className="flex-row-container">
<span style={{ marginRight: "4px" }}>Color:</span>
<div className="flex-row-container">
{[...Array(10).keys()].map((i) => (
<div
className={'symbol-preview symbol-' + i + (i === selectedIndex ? ' symbol-preview-selected' : '')}
onClick={makeHandleClick(i)}
key={i}
/>
))}
</div>
</div>
</div>
);
}
推荐阅读
- ansible - 使用 add_host 为上一个任务中更改的主机创建动态组
- python - LSTM 网络返回多个输出
- reactjs - 我到底是如何对在 Web 服务器上实际工作做出反应的 - 只是不断收到大量错误 - 主要来自 Babel
- javascript - 单击停止按钮时以红色显示记录文本
- google-apps-script - 在目标工作表中使用 importRange 时保留关联的行数据
- scala - 使用宏进行条件编译适用于方法,但不适用于字段
- authentication - asp.net core MVC中的所有身份验证选项是什么
- c# - 如何模拟在方法内创建的变量 - Moq
- asp.net - 如何在 asp.net 中创建 excel 类型的过滤器、排序、编辑数据?
- git - 将 repo 从 Bitbucket 迁移到 Gitlab 不允许将新提交推送到 GitLab