reactjs - 输入正在失去对钩子(Hook)更新的关注

Question

我是 reactjs 新手，我正在尝试从输入中读取数据。问题是当我输入一个标志时，我的输入失去了焦点。但只有当所有逻辑都在函数内部时。
当带有按钮和逻辑的输入位于不同的文件中时 - 它正在工作。我真的不知道为什么...

我已经创建了具有相同代码的单独文件并将其导入到 sollution - 没关系。
我试过 onChange={handleChange} - 也失去了焦点。

export default function MyInput(){
const [citySearch, updateCitySearch] = useState();

function searchCityClick(){
   alert(citySearch);
}
const SearchComponent = ()=> (
    <div> 
        <input 
        value={citySearch}
        onChange={(e) => updateCitySearch(e.target.value)}/>
        <Button variant="contained" color="primary" onClick={searchCityClick}>
            Search
        </Button>
    </div>

);
return(
    <div>
        <div>
            <SearchComponent />
        </div>
    </div>
)}

Answer 1

SearchComponent是一个功能组件，不应在另一个组件中定义。定义 SearchComponent里面 MyInput会导致SearchComponent被重新创建(而不是重新渲染)，本质上它的 DOM 将被删除，然后在每次点击时重新添加。

解决方法很简单，提取SearchComponent来自 MyInput , 并通过 props 传递函数和数据目的:

const { useState, useCallback } = React;

const SearchComponent = ({ citySearch, updateCitySearch, searchCityClick }) => (
  <div> 
    <input
      value={citySearch}
      onChange={e => updateCitySearch(e.target.value)} />
    
    <button onClick={searchCityClick}>Search</button>
  </div>
);

const MyInput = () => {
  const [citySearch, updateCitySearch] = useState('');

  const searchCityClick = () => alert(citySearch);

  return(
    <div>
      <SearchComponent 
        citySearch={citySearch} 
        updateCitySearch={updateCitySearch}
        searchCityClick={searchCityClick} />
    </div>
  );
};

ReactDOM.render(
  <MyInput />,
  root
);

<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"></div>