自定义搜索栏标题onchange函数react原生

Question

我已经在我的react原生项目中创建了一个自定义标题和搜索栏。我在我的主组件中调用了标题和搜索栏。我想上个热搜。就像当用户开始输入第一个字母时，过滤器想要工作。我已经使用像(ALL，Item1，Item2)这样的按钮过滤了数据，如果用户点击(All)，他们在搜索栏中搜索任何东西，这些项目都应该被过滤。现在我的问题是，因为我对搜索栏有单独的类函数，并且我将那个类调用到我的主组件中。我想写onchange函数的地方。如果我的编码结构错误，请纠正我，并帮助我实现输出。提前谢谢。下面是我的头和主组件的代码。

class SearchBar extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: "#FFFFFF",
          borderRadius: 12,
          color: "#8E8E93",
          flexDirection: "row",
          fontSize: 18,
          height: 100,
          width: config.deviceWidth * 0.89,
          margin: 25,
          marginVertical: 10,
          paddingHorizontal: 20,
          marginTop: config.deviceWidth * 0.27,
          marginRight: 20,
          alignItems: "center",
        }}
      >
        <TextInput
          placeholder="Search Product/Stores"
          style={{ fontSize: 15, paddingLeft: 2, alignItems: "center" }}
        />
        <Icon
          name="ios-search"
          style={{ fontSize: 25, paddingLeft: config.deviceWidth * 0.28 }}
        />
      </View>
    );
  }
}

class MainComponent extends Component {
    static navigationOptions = {
      headerRight: <SearchBar />
    }

}

    constructor(props) {
    this.state = {
        isLoading: true
    }
    }
    
    render() {
    return(
    
     Here I am using FlatList to populate the data 
    )
    }

Answer 1

您可以将该函数添加到主组件类中，并将该函数作为属性传递给搜索组件类。

Answer 2

请阅读React docs on Lifting State Up，它适用于此处。当您有多个依赖于共享状态值的组件时，该状态应该归组中最高的组件所有，并通过属性传递给其他组件。Props可以是任何东西:字符串、函数、其他组件等。

在这种情况下，enteredText (或者您想叫它的任何东西)都属于MainComponent状态。MainComponent还需要拥有一个通过setState将该文本更新为新值的函数。这可能是事件的函数，但就我个人而言，我会让它成为文本的函数，并处理树中更下方的事件到文本(e => e.target.value)的映射，因为这更灵活，因为它不会将MainComponent的逻辑绑定到任何特定的事件类型。这在这种情况下没有任何区别，但如果您阅读将逻辑从表示中分离出来，您将开始看到。

当MainComponent调用<SearchBar />时，它应该在属性中包含文本和更新函数，如下所示

<SearchBar
   text={this.state.enteredText}
   onChangeText={this.onChangeText}
/>

或

<SearchBar
   text={this.state.enteredText}
   onChangeText={e => this.setState({enteredText: e.target.value})}
/>

或者您想要设置它的其他方式。

然后，SearchBar将这些属性向下传递给TextInput，它也需要接收值和某种回调来更新该值。