我有这种从对象数组中渲染出来的卡片。
父组件:
[{foo: 'bar', baz: [{ name: string, path: string: '/'}]
state = {isHovering: false}
handleMouseHover = () => {
const { isHovering } = this.state;
this.setState({ isHovering: !isHovering });
}
;
我将 handleMouseHover()
和 isHovering
作为 Prop 传递给子组件。
结果是这样的:
子组件
<LinkContainer
onMouseEnter={handleMouseHover}
onMouseLeave={handleMouseHover}
className="linkContainer"
>
{isHovering && (
<FontAwesomeIcon
icon="copy"
className="copyIcon"
onClick={copyToClipboard}
/>
)}
结果是包含 3 个链接的 4 张卡片。每次我将鼠标悬停在链接上时,我都希望显示复制到剪贴板的图标。但是,当我将鼠标悬停在任何元素上时,它会将 isHovering
设置为 true
从而使所有图标都可见。理想情况下,我只希望我悬停的链接图标变得可见。谁能帮我找出更好的解决方案或改进我已经编写的代码。
非常感谢!
最佳答案
您可以将对象保留在您的状态而不是 bool 值,它有一个键,指示以该特定键作为索引的对象是否悬停。
示例
class App extends React.Component {
state = {
arr: [{ text: "foo" }, { text: "bar" }],
isHovered: {}
};
handleMouseEnter = index => {
this.setState(prevState => {
return { isHovered: { ...prevState.isHovered, [index]: true } };
});
};
handleMouseLeave = index => {
this.setState(prevState => {
return { isHovered: { ...prevState.isHovered, [index]: false } };
});
};
render() {
const { arr, isHovered } = this.state;
return (
<div>
{arr.map((el, index) => (
<Child
onMouseEnter={() => this.handleMouseEnter(index)}
onMouseLeave={() => this.handleMouseLeave(index)}
text={el.text}
isHovering={isHovered[index]}
key={index}
/>
))}
</div>
);
}
}
function Child({ onMouseEnter, onMouseLeave, text, isHovering }) {
return (
<div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
{text} {isHovering && " (hovering!)"}
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
关于javascript - reactjs - 在悬停时为从数组呈现的列表项呈现单个图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53194663/