Javascript 如何对React中的不同元素使用相同的功能？

如何使用相同的函数转换不同的元素？我可以使用类似于this.target的

吗

这里有一个例子，当我点击MoveBox按钮时，我想转换一个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>
);}

const handleChangePos=（）=>{
let box=document.getElementById（“box”）；
box.style.transform=`translateY（-20px）`；
};
常数n=4；
函数App（）{
返回(
英雄
移动框
次英雄
{[…数组（n）].map（（e，i）=>(
移动框
))}
);}

实例：

我想要的理想结果是单击按钮，然后相应的框将变换，其他框将不受影响。
您需要创建一个新组件来包装所需的功能。使用React，您不需要调用
document.getElementById

我已经编辑了您的示例，以创建一个新组件，该组件将其偏移量存储在组件状态中。这将修复子框的问题，但您需要找到一种方法使其也可扩展到主英雄框


以下是链路失效时的相关组件：

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>
    ];
  }
}

类可移动扩展React.Component{
构造函数（）{
超级（）；
this.state={offset:0}；
this.move=this.move.bind（this）；
}
移动（）{
if（this.state.offset==0）{
this.setState（{offset:-20}）；
}否则{
this.setState（{offset:0}）；
}
}
render（）{
返回[
,
移动框
];
}
}
您需要创建一个新组件来包装所需的功能。使用React，您不需要调用
document.getElementById

我已经编辑了您的示例，以创建一个新组件，该组件将其偏移量存储在组件状态中。这将修复子框的问题，但您需要找到一种方法使其也可扩展到主英雄框


以下是链路失效时的相关组件：

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>
    ];
  }
}

类可移动扩展React.Component{
构造函数（）{
超级（）；
this.state={offset:0}；
this.move=this.move.bind（this）；
}
移动（）{
if（this.state.offset==0）{
this.setState（{offset:-20}）；
}否则{
this.setState（{offset:0}）；
}
}
render（）{
返回[
,
移动框
];
}
}
您可以通过多种方式轻松解决此问题，但首先，您不应该有多个具有相同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>

为了避免传递索引，您还可以在单击按钮时使用按钮传递的事件中的
event.target.name
，并像
Move Box
一样声明按钮，但基本相同

我还建议不要使用ID，而是维护一个
ref
列表，并根据索引修改它们。您可以在此处阅读更多关于REF的信息：
您可以通过多种方式轻松解决此问题，但首先，您不应该有多个具有相同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>

为了避免传递索引，您还可以在单击按钮时使用按钮传递的事件中的
event.target.name
，并像
Move Box
一样声明按钮，但基本相同

我还建议不要使用ID，而是维护一个
ref
列表，并根据索引修改它们。您可以在此处阅读有关REF的更多信息：
因为我是针对无状态组件执行此操作的，这就是为什么我使用ID。REF不能用于无状态，对吗？我已更新了示例链接的代码，它与您的解决方案配合使用。但是我无法让第二行第一个元素进行转换，当我单击它时，第一行元素被转换。我想这是因为第二行第一个元素ID是零。。。不确定event.target.name方式，尝试一下，但失败了…您介意给我举个例子吗？谢谢您是对的，refs不能与无状态组件一起使用，但是我建议在您的情况下使用statefull组件，只有小的子组件作为无状态组件，如
Box
和
SubHeroContainer
。啊，我使用
let Box=document.getElementById转换了第二行第一项（index==undefined？“box main”：
box-${index}
）；
您可以处理与第一行类似的第一行，也可以将其命名为
box-0
，还可以使用它的事件处理程序，如
（）=>handleChangePos（0）
。那么您就不需要处理函数中的逻辑来检查索引是否未定义。它应该可以正常工作。因为我对无状态组件执行此操作，所以我使用了ID。Refs不能在无状态中使用，对吗？我已经更新了示例链接的代码，它可以与您的解决方案配合使用。但我无法转换第二行第一个元素，当我单击它时，第一行元素被转换。我想这是因为第二行第一元素ID为零…不确定event.target.name的方式，尝试一下，但失败了…您介意给我一个例子吗？谢谢！！！您是对的，refs不能用于无状态组件，但是我建议您使用statefull组件r case，只有小的子组件作为无状态组件，比如
Box
和
subherocainer
。啊，我通过使用
let Box=document.getElementById（index==undefined？“Box main”）：
Box-${index}
转换了第二行第一项；
您可以像处理第一行一样处理第一行，也可以将其命名为
box-0
，还可以使用它的事件处理程序，如
（）=>handleChangePos（0）
。这样您就不需要了