如何使用相同的函数转换不同的元素?我可以使用像this.target
等的东西吗?
我有一个例子,当我点击Move Box按钮时,想要转换Box组件。但是现在无论我点击哪个按钮,只会转换第一个Box ...
const handleChangePos = () => {
let box = document.getElementById("box");
box.style.transform = `translateY(-20px)`;
};
const n = 4;
function App() {
return (
<div className="App">
<h1>Hero</h1>
<HeroBox>
<Box id="box" />
<button onClick={handleChangePos}>Move Box</button>
</HeroBox>
<h2>Sub Hero</h2>
<SubHeroContainer>
{[...Array(n)].map((e, i) => (
<SubHeroBox key={i}>
<Box2 id="box" />
<button onClick={handleChangePos}>Move Box</button>
</SubHeroBox>
))}
</SubHeroContainer>
</div>
);}
实例:https://codesandbox.io/s/6vxqlo06v3
我想要的理想结果是我点击了按钮,然后它的各个Box将变换,其他Box不会受到影响。
您可以通过多种方式轻松解决此问题,但首先,您不应该有多个具有相同ID的元素。由于你已经有标题的id="Box"
,我建议用索引生成其余的:
<SubHeroContainer>
{[...Array(n)].map((e, i) => (
<SubHeroBox key={i}>
<Box2 id={`box-${i}`} />
<button onClick={() => handleChangePos(i)}>Move Box</button>
</SubHeroBox>
))}
</SubHeroContainer>
然后,您可以修改handleChangePos
以接受参数(索引)并找到给定元素:
const handleChangePos = (index) => {
let box = document.getElementById(index ? `box-${index}` : "box");
box.style.transform = `translateY(-20px)`;
};
为了避免传递索引,您还可以使用单击按钮时传递的事件中的event.target.name
,并将按钮声明为<button onClick={handleChangePos} name={i} >Move Box</button>
,但它大致相同。
我还建议不要使用ID,而是保持refs
列表,并根据索引修改它们。你可以在这里阅读更多关于refs的信息:https://reactjs.org/docs/refs-and-the-dom.html
您需要创建一个包含所需功能的新组件。使用React,你永远不需要打电话给document.getElementById
我编辑了您的示例以创建一个新组件,该组件将其偏移量存储在组件状态中。这修复了它为子框,但你需要找到一种方法,使其可以扩展为主英雄框。
https://codesandbox.io/s/3vn642j63m
这是链接死亡的相关组件:
class Moveable extends React.Component {
constructor() {
super();
this.state = { offset: 0 };
this.move = this.move.bind(this);
}
move() {
if (this.state.offset === 0) {
this.setState({ offset: -20 });
} else {
this.setState({ offset: 0 });
}
}
render() {
return [
<Box2 id="box" style={{transform: `translateY(${this.state.offset}px)`}} />,
<button onClick={this.move}>Move Box</button>
];
}
}