如何使用JavaScript制作标签动画（React JS）

我正在尝试创建一个浮动标签，当您单击输入时，标签将上升。但是我遇到了一个问题，我无法在不影响另一个类的情况下调用该类（元素）。例如，我有两个类名相同的类，当我尝试单击其中一个时，其他类将同时工作。我正在尝试添加一个数组，但由于我刚刚开始学习JavaScript，我不知道如何正确地进行添加

const floatinput=document.getElementsByClassName（'entry-form-input'）；
const floatlabel=document.getElementsByClassName（“tryingtoanimatelabel”）；
函数forgetmove（）{
floatlabel[0].classList.add（“myanimatelabel”）；
}
函数removemove（）{
如果（浮点输入[0]。值=“”）{
floatlabel[0].classList.remove（“myanimatelabel”）；
}否则{
floatlabel[0].classList.add（“myanimatelabel”）；
}
}

队名
队名

在类名的末尾添加一个数字值，使其唯一，或者指定每个id=“id1”和该id的目标，这样您可以尝试将“事件作为参数传递给上述函数。 在这种情况下，您的事件（单击或模糊等）将绑定到事件发生的元素，您可以将元素称为event.target

function forgetmove(event){
    event.target.classList.add("myanimatelabel");
}

function removemove(event){
    if (event.target.previousSibling.value === "") { //take the previous node of the element on which event happened (event.target)
        event.target.classList.remove("myanimatelabel");
    } else {
        event.target.classList.add("myanimatelabel");
    }
}

要回答的编辑很少…

我建议您在输入上使用“onBlur”事件， 另外，如果您想获取发生事件的确切元素（不包括其子元素），则可以使用event.CurrentTarget。
最终代码如下所示：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleClick=this.handleClick.bind（this）；
this.handleBlur=this.handleBlur.bind（this）；
}
handleClick（event）{//使用“currentTarget”获取发生事件的元素，这将忽略我们单击子元素的情况
让_label=event.currentTarget.querySelector（'label'）；
让_input=event.currentTarget.querySelector（'input'）；
_label.classList.add（'myanimatelabel'）；
_input.focus（）；
}
车把（活动）{
让_input=event.target；//使用“target”获取发生事件的元素
让_label=\u input.nextElementSibling；//获取下一个元素进行输入
如果（_input.value==“”）{
_label.classList.remove（'myanimatelabel'）；
}否则{
_label.classList.add（'myanimatelabel'）；
}
}
render（）{
返回(
队名
队名
);
}
}
ReactDOM.render（，document.getElementById（'root'）；

.wrapper>div{
位置：相对位置；
边缘顶部：30px；
左边距：30px；
显示：内联块；
}
.包装器输入{
左侧填充：10px；
垫面：3件；
}
.包装标签{
位置：绝对位置；
左：10px；
顶部：3px；
过渡时间：0.6s；
光标：文本；
}
.wrapper.myanimatelabel{
顶部：-25px；
}

请注意，这只能在CSS中使用

：focus

伪类来完成。它给了我一个“TypeError:无法读取null的属性'value'“@Hypnoeye哦，很抱歉。我注意到您在父元素上使用了onBlur事件。我不完全理解这背后的原因，所以我建议您在输入时使用onBlur事件。同样，在onClick中，u可以使用«event.currentTarget»，因此子元素不会随event一起选择。我附上了一个工作示例的答案，希望它能帮助您非常感谢您。