我在 React Hook 中輸入時失去了對輸入的關注

Question

當我在輸入上打字時，寫一個字母后焦點就會丟失。 我試圖關注輸入正在失去對鈎子更新的關注，但它仍然是一樣的

這是我的代碼：

// Input.js

export const DesktopSearch = ({Filter, SetFilter }) =>{
    return (
        <form>
            <div className="search_area">                
                <input type="text" name="search" placeholder="Search Name" value={Filter.search} onChange={e => SetFilter({...Filter, [e.target.name]: e.target.value})}/>
            </div>
        </form>
    )
}

// App.js

export default function App() {

    const [Filter, SetFilter] = useState({search: ''})
    const Screens = () => {
    if(Screen === 1){
         return (<>
              <p>Screen 1</p>
              <DesktopSearch Filter={Filter} SetFilter={SetFilter}/>
         </>)
    }
    else(Screen === 2){
         return (<>
              <p>Screen 2</p>
              <DesktopSearch Filter={Filter} SetFilter={SetFilter}/>
         </>)
    }
    }
    return (
         <Screens/>
    )

}

Answer 1

首先，你的“if ... else”沒用，應該減少。 此外，您正在重新渲染您的組件onChange ，您應該應用單一責任原則並讓您的輸入管理自己的狀態。

我想補充一點，變量名應該以小寫字符開頭。

export default function App() {


    return (
         <>
              <p>Screen {Screen}</p>
              <DesktopSearch />
         </>
    );

}

其他文件：

export const DesktopSearch = () =>{
    const [Filter, SetFilter] = useState({search: ''});

    return (
        <form>
            <div className="search_area">                
                <input type="text" name="search" placeholder="Search Name" value={Filter.search} onChange={e => SetFilter({...Filter, [e.target.name]: e.target.value})}/>
            </div>
        </form>
    )
}

Answer 2

您像組件一樣使用Screens函數，但它只是函數組件中的一個方法。 嘗試調用它而不是像組件一樣使用：

export default function App() {
  const [Filter, SetFilter] = useState({ search: "" });
  const Screens = () => {
    if (Screen === 1) {
      return (
        <>
          <p>Screen 1</p>
          <DesktopSearch Filter={Filter} SetFilter={SetFilter} />
        </>
      );
    } else if (Screen === 2) {
      return (
        <>
          <p>Screen 2</p>
          <DesktopSearch Filter={Filter} SetFilter={SetFilter} />
        </>
      );
    }
  };

  return Screens();
}

或者你可以完全放棄它：

export default function App() {
  const [Filter, SetFilter] = useState({ search: "" });
    if (Screen === 1) {
      return (
        <>
          <p>Screen 1</p>
          <DesktopSearch Filter={Filter} SetFilter={SetFilter} />
        </>
      );
    } else if (Screen === 2) {
      return (
        <>
          <p>Screen 2</p>
          <DesktopSearch Filter={Filter} SetFilter={SetFilter} />
        </>
      );
    }
}