Javascript 反应-如果我更改状态，每次新渲染时都会使用占位符和动画输入字段

我有一个输入字段，其中包含一个名为Name的占位符。 如果在输入字段中单击，占位符标签将以平滑动画覆盖该字段。 因此，如果我更改输入字段的状态并渲染新的组件，那么输入字段当然也是新的渲染。我翻倒的文本是站着的，但每次新渲染时动画都会出现，因此输入字段会闪烁

<Col md="4">
    <label className="field a-field a-field_a2" style={{ width: "100%", marginBottom: "10%" }}>
        <input className="field__input a-field__input" placeholder="z.B. Hans" onChange={event => { this.setState({ sucheNach: event.target.value }) }} value={this.state.sucheNach} onKeyPress={event => {
            if (event.key === 'Enter') {
                this.suche()
            }
        }} autoFocus  ></input>
        <span className="a-field__label-wrap">
            <span className="a-field__label">Name</span>

        </span>
    </label>
</Col>

---

这就是它的工作原理，如果您不想触发CSS中的某些内容，那么在输入HTML标记上添加或删除一个类，在随后的呈现中，您可以显示CSS吗？

.field{
--uiFieldPlaceholderColor: var(--fieldPlaceholderColor, #767676);
}

.field__input{ 
background-color: transparent;
border-radius: 0;
border: none;

-webkit-appearance: none;
-moz-appearance: none;

font-family: inherit;
font-size: 1em;
}

.field__input:focus::-webkit-input-placeholder{
color: var(--uiFieldPlaceholderColor);
}

.field__input:focus::-moz-placeholder{
color: var(--uiFieldPlaceholderColor);
opacity: 1;
}



.a-field{
 display: inline-block;
}

.a-field__input{ 
display: block;
box-sizing: border-box;
width: 100%;
}

.a-field__input:focus{
outline: none;
}




.a-field{
--uiFieldHeight: var(--fieldHeight, 40px);  
--uiFieldBorderWidth: var(--fieldBorderWidth, 2px);
--uiFieldBorderColor: var(--fieldBorderColor);

--uiFieldFontSize: var(--fieldFontSize, 1em);
--uiFieldHintFontSize: var(--fieldHintFontSize, 1em);

--uiFieldPaddingRight: var(--fieldPaddingRight, 15px);
--uiFieldPaddingBottom: var(--fieldPaddingBottom, 15px);
--uiFieldPaddingLeft: var(--fieldPaddingLeft, 15px);   

 position: relative;
 box-sizing: border-box;
 font-size: var(--uiFieldFontSize);
 padding-top: 1em;  
 }

.a-field__input{
height: var(--uiFieldHeight);
padding: 0 var(--uiFieldPaddingRight) 0 var(--uiFieldPaddingLeft);
border-bottom: var(--uiFieldBorderWidth) solid var(--uiFieldBorderColor);  
}

.a-field__input::-webkit-input-placeholder{
opacity: 0;
transition: opacity .2s ease-out;
}

.a-field__input::-moz-placeholder{
opacity: 0;
transition: opacity .2s ease-out;
}

.a-field__input:not(:placeholder-shown) ~ .a-field__label-wrap .a- field__label{
opacity: 0;
bottom: var(--uiFieldPaddingBottom);
}

.a-field__input:focus::-webkit-input-placeholder{
opacity: 1;
transition-delay: .2s;
}

.a-field__input:focus::-moz-placeholder{
opacity: 1;
transition-delay: .2s;
}

.a-field__label-wrap{
box-sizing: border-box;
width: 100%;
height: var(--uiFieldHeight);   

pointer-events: none;
cursor: text;

position: absolute;
bottom: 0;
left: 0;
 }

.a-field__label{
position: absolute;
left: var(--uiFieldPaddingLeft);
bottom: calc(50% - .5em);

line-height: 1;
font-size: var(--uiFieldHintFontSize);

pointer-events: none;
transition: bottom .2s cubic-bezier(0.9,-0.15, 0.1, 1.15), opacity .2s ease-out;
will-change: bottom, opacity;
}

.a-field__input:focus ~ .a-field__label-wrap .a-field__label{
opacity: 1;
bottom: var(--uiFieldHeight);
}




.field{
--fieldBorderColor: #D1C4E9;
--fieldBorderColorActive: #673AB7;
}