<input>元素在反应中的活性检测

Question

请告诉我如何用react组件替换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>
)

Answer 1

您可以使用两个处理程序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>

​