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>
    )
}
}

搜索栏搜索

1 个答案: