請告訴我如何用反應組件替換 document.addEventListener
const searchIsActive = createRef()
const searchContainer = createRef()
document.addEventListener('focusin', () => {
searchContainer.current.style.background = "#303130";
}
)
return(
<div ref={ searchContainer } className="search__container">
<img src="img"></img>
<input ref={ searchIsActive } type="text"></input>
</div>
)
uj5u.com熱心網友回復：
您可以使用兩個處理程式onFocus和onBlur來執行此操作，只需一個ref輸入包裝器即可：
function App() {
const searchContainer = React.createRef();
const onFocusHandler = () => {
searchContainer.current.style.background = "#303130";
};
const onBlurHandler = () => {
searchContainer.current.style.background = "#FFFFFF";
};
return (
<div ref={searchContainer} className="search__container">
<img src="img"></img>
<input
type="text"
onFocus={onFocusHandler}
onBlur={onBlurHandler}
></input>
</div>
);
}
ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/508638.html