Question

我在我的本机项目中创建了一个自定义标题和搜索栏。我在主要组件中同时调用了标题和搜索栏。我想进行热门搜索。就像用户开始输入第一个字母时一样，过滤器也要工作。如果用户单击（全部），我已经使用（ALL，Item1，Item2）之类的按钮过滤了数据，并且他们在搜索栏中搜索了所有内容，则这些项目应该被过滤。现在我的问题是，由于我拥有用于搜索栏的单独的类功能，因此我将该类称为主组件。我要在哪里写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，后者还需要接收一个值和某种回调来更新该值。

自定义搜索栏标题onchange函数会自动响应本机

2 个答案: