输入正在失去对钩子更新的关注

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是一功能部件，并且不应该另一个组件内来限定。定义SearchComponentinsideMyInput将导致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>