反应钩子。如何使输入显示并在 setstate 值后获得输入的焦点？谢谢

【问题标题】：React-hooks. How can I make the input display and get the focus of the input after the setstate value?Thanks反应钩子。如何使输入显示并在 setstate 值后获得输入的焦点？谢谢
【发布时间】：2020-06-17 02:21:15
【问题描述】：

如何使输入显示并在setstate值之后获得输入的焦点

import React, { useState, useRef } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = useState(false);
  const refEl = useRef(null);
  const clickBtn = () => {
    setState(true);
    refEl.current.focus();
  };
  return (
    <div className="App">
      <button onClick={clickBtn}>showIbout</button>
      {state && <input ref={refEl} />}
    </div>
  );
}

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

您可以使用useEffect()。

const { useState, useEffect, useRef } = React;


function App() {
  const [state, setState] = useState(false);
  const refEl = useRef(null);
  const clickBtn = () => {
    setState(true);
  };
  useEffect(()=>{
    if(state){
      refEl.current.focus();
    }
  },[state]);
  return (
    <div className="App">
      <button onClick={clickBtn}>showIbout</button>
      {state && <input ref={refEl} />}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<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 id="root" />

【讨论】：