我有一種情況，shrink當我單擊或輸入輸入框時，我想將一個名為的類附加到下面的標簽文本（顯示名稱）。我的代碼如下：
const FormInput = ({ label, ...otherProps} ) => {
let labelClassName = 'formInput-label';
const addLabelClassName = () => {
labelClassName = `${labelClassName} shrink`;
console.log(labelClassName, 'labelClassName inside')
}
console.log(labelClassName, 'labelClassName outside')
return (
<div className="group">
{label &&
<label
className={labelClassName}
>{label}</label>
}
<input onFocus={addLabelClassName } onChange={addLabelClassName } className="formInput" {...otherProps} />
</div>
)
};
我的問題：
為什么當我開始關注/鍵入時，React 會為
labelClassName insideas輸出正確的類名formInput-label shrink，但立即將其更改回formInput-label該labelClassName outside位置？我將如何解決這個問題？我還嘗試將代碼更改為使用如下
UseState方法：
const FormInput = ({ label, ...otherProps} ) => {
const [interaction, setInteraction] = useState('');
let labelClassName = 'formInput-label';
const onInteracting = () => {
setInteraction('interacting')
}
if(interaction === 'interacting') {
labelClassName = `${labelClassName} shrink`;
}
return (
<div className="group">
{label &&
<label
className={labelClassName}
>{label}</label>
}
<input onFocus={onInteracting} onChange={onInteracting} className="formInput" {...otherProps} />
</div>
)
};
這將附加正確的類shrink，labelClassName但是當我在輸入/表單之外單擊時，我無法取消它。我該如何解決這個問題？
謝謝你！
uj5u.com熱心網友回復：
第二種方法是更好的方法，因為隨著狀態的改變，您將觸發組件重新渲染（第一種方法永遠不會重新渲染組件）。
在第二種方法中，您可以利用onBlur事件并創建一個將狀態設定為默認值的處理程式。像這樣的東西。你不需要onChangesetIntercation
...
const handleBlur = () => {
setInteraction("");
};
...
然后在輸入中，您必須設定onBlur道具。onChange不應該做和已經做的一樣的事情onFocus。
....
<input
onFocus={onInteracting}
onBlur={handleBlur}
className="formInput"
{...otherProps}
/>
....
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/485954.html
標籤：javascript 反应 形式 重点 改变
上一篇：引導輪播和列不會彼此相鄰