搜索栏搜索

Question

我正在尝试创建一个库应用程序，我希望能够按标题搜索故事。我从SearchBar组件创建了一个搜索栏，但我不知道何时调用一个已使用的定义函数，该函数允许我获取带有搜索词的书籍。有人能告诉我我们需要用什么道具吗？更具体地说，我怎么知道左边的小放大镜被点击了？非常感谢。

render() {
var count = 0
var title = "";
var author = "";
return(
<ScrollView>
<View>
<Header
backgroundColor = {"#b7e4c7"}
centerComponent = {{
text:"Available stories",
style: {
color:'white',
fontSize:20,
fontWeight:'bold'
}
}}/>

<SearchBar
lightTheme

containerStyle = {{marginTop:5}}
placeholder="Which book would you like to search"
onChangeText={text =>
{this.setState({search:text})}}
value ={this.state.search}

/>

{this.state.tas.map((element) => {
count = count + 1
if(count%2 == 1) {
title = element;
}
else {
author = element;
return(
<TouchableOpacity style = {styles.storyButton} key = {element}>
<Text style = {styles.buttonText}>Title: {title}</Text>
<Text style = {styles.buttonText}>Author: {author}</Text>
</TouchableOpacity>
)
}
})}
</View>
</ScrollView>
)
}

Answer 1

请查看fetchDetails和onChangeText

import React from "react";
import "./styles.css";
export default class App extends React.Component {
// state init

fetchDetails = () =>{
const search = this.state.search
//DO fetch 
}
render() {
var count = 0
var title = "";
var author = "";
return(
<ScrollView>
<View>
<Header
backgroundColor = {"#b7e4c7"}
centerComponent = {{
text:"Available stories",
style: {
color:'white',
fontSize:20,
fontWeight:'bold'
}
}}/>

<SearchBar
lightTheme

containerStyle = {{marginTop:5}}
placeholder="Which book would you like to search"
onChangeText={text =>{
this.setState({search:text})
this.fetchDetails()
}}
value ={this.state.search}

/>

{this.state.tas.map((element) => {
count = count + 1
if(count%2 == 1) {
title = element;
}
else {
author = element;
return(
<TouchableOpacity style = {styles.storyButton} key = {element}>
<Text style = {styles.buttonText}>Title: {title}</Text>
<Text style = {styles.buttonText}>Author: {author}</Text>
</TouchableOpacity>
)
}
})}
</View>
</ScrollView>
)
}
}