Question

键入时，搜索栏中没有任何内容，但它知道我正在键入（通过updateSearch函数中的打印语句）。从对react-native searchBar的理解来看，甚至不需要做任何事情就可以在此处显示文本，因此我真的不知道该如何解决这个问题。这是一个较大项目的一部分。.但是我祈祷这个问题与其余项目无关。

import React, { Component } from "react";
import {
  View,
  Text,
  FlatList,
  ActivityIndicator,
  SafeAreaView,
  StyleSheet
} from "react-native";
import Header from "../components/Header";
import { SearchBar, List, ListItem } from 'react-native-elements';

export default class Search extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      query: "",
      data: []
    };

  }

  renderHeader = () => {
    return (
    <SearchBar
    placeholder="Type Here..."
    onChangeText={this.updateSearch}
    lightTheme={true}
    />
    );
  }

  updateSearch = text => {
    console.log("text", text);
    const formattedSearch = text.toLowerCase();
    this.setState({ query: formattedSearch });
    console.log("text", this.state.query);
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Header text={"Search"} />
        <FlatList
          ListHeaderComponent={this.renderHeader}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Expo.Constants.statusBarHeight
  }
});

Answer 1

因此，您可以在搜索栏中添加值props并进行检查。

renderHeader = () => {
    return (
    <SearchBar
    placeholder="Type Here..."
    onChangeText={this.updateSearch}
    lightTheme={true}
    value={this.state.query}
    />
    );
  }

因此，我相信您会将搜索文本存储为查询变量。因此，值是this.state.query。

希望有帮助。询问您是否有任何疑问。

Answer 2

在触发<SearchBar/>事件时更新其值，使onChangeText组件成为受控输入/受控组件。

<SearchBar
    placeholder="Type Here..."
    onChangeText={this.updateSearch}
    value={this.state.query}
    lightTheme={true}
/>

以这种方式进行操作-从性能的角度来看，更新每个新角色的状态可能会使您担心，但这是React建议您这样做的一种正式方式。这样的受控输入非常常见。

为什么我的本机SearchBar中的文本没有更新？

2 个答案: