[英]React native render component based on TextInput onfocus
I want to display something in my react component when user clicks into a text input (something similar to Instagram's search, where if you click on their input field, a search component suggestion shows up.当用户点击文本输入时,我想在我的 react 组件中显示一些东西(类似于 Instagram 的搜索,如果你点击他们的输入字段,搜索组件的建议就会出现。
const SearchScreen = props => {
const renderSearch = () => {
return (
<>
// need to display the search suggestion
</>
)
}
return (
<>
<TextInput
placeholder="Search"
onChangeText={text => handleChange(text)}
value={searchText}
onFocus={() => renderSearch()} // based on focus, then render component
/>
<View>
// how do I render here?
// this will render on load, but need to render onFocus
{renderSearch}
</View>
</>
);
};
You can apply a similar pattern than stackoverflow.com/a/34091564/1839692.您可以应用与 stackoverflow.com/a/34091564/1839692 类似的模式。
For instance you can try something like :例如,您可以尝试以下操作:
const SearchScreen = props => {
const [searchFocus, setSearchFocus] = useState(false)
const renderSearch = () => {
return (
<>
// need to display the search suggestion
</>
)
}
return (
<>
<TextInput
placeholder="Search"
onChangeText={text => handleChange(text)}
value={searchText}
onFocus={() => setSearchFocus(true)}
onBlur={() => setSearchFocus(false)}
/>
{ searchFocus
? <View>
{renderSearch}
</View>
: <View>
// Add here the code to display when not searching
</View>
}
</>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.