输入正在失去对钩子更新的关注 [英] Input is loosing focus on hooks update
问题描述
我是 reactjs 的新手,我正在尝试从输入中读取数据.问题是当我输入一个符号时,我的输入会失去焦点.但只有当所有逻辑都在函数内部时.当带有按钮和逻辑的输入位于不同的文件中时 - 它正在工作.我真的不知道为什么...
我用相同的代码创建了单独的文件并将其导入到 sollution - 没关系.我试过 onChange={handleChange} - 也失去了焦点.
导出默认函数 MyInput(){const [citySearch, updateCitySearch] = useState();函数 searchCityClick(){警报(城市搜索);}const SearchComponent = ()=>(<div><输入值={citySearch}onChange={(e) =>updateCitySearch(e.target.value)}/><Button variant="contained" color="primary" onClick={searchCityClick}>搜索</按钮>
);返回(<div><div><搜索组件/>
)}
SearchComponent
是一个功能组件,不应在另一个组件中定义.在 MyInput
中定义 SearchComponent
将导致 SearchComponent
被重新创建(不重新渲染),本质上它的 DOM 将被删除,然后重新添加每次点击.
解决方案非常简单,从 MyInput
中提取 SearchComponent
,然后通过 props
对象:
const { useState, useCallback } = React;const SearchComponent = ({ citySearch, updateCitySearch, searchCityClick }) =>(<div><输入值={citySearch}onChange={e =>updateCitySearch(e.target.value)}/><button onClick={searchCityClick}>搜索</button>
);const MyInput = () =>{const [citySearch, updateCitySearch] = useState('');const searchCityClick = () =>警报(城市搜索);返回(<div><搜索组件城市搜索={城市搜索}updateCitySearch={updateCitySearch}searchCityClick={searchCityClick}/>
);};ReactDOM.render(<我的输入/>,根);
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><div id="root"></div>