Question

我想使用react-native进行搜索活动。我在tabBottomNavigator中创建了一个stacknavigation，并且stacknavigation具有导航选项和headerLeft选项。我有和组件。我的问题是关于如何从组件处理搜索栏onchangetext事件，即使它在不同的类中也是如此。谢谢...

StackForSearch.js

export default createStackNavigator({ Search:{ screen: Search,
navigationOptions: ({ navigation }) =>({
  headerLeft: <SearchHeader navigation={navigation}/>,
  }),
},});

SearchHeader.js

export default class SearchHeader extends Component<{}>{


  render(){

    return(
      <View style={styles.Container} >
      <SearchBar
        containerStyle={{backgroundColor:'white', margin:0,padding:0,borderWidth:0,borderBottomWidth:0}}
        inputStyle={{backgroundColor: 'white',paddingLeft:36,fontSize:16,color:'#171F33'}}
        lightTheme
        round
        onChangeText={}
        icon={{style:{color:'black', fontSize:22 ,margin:0}}}
        placeholder='Search..' />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  Container:{
    flex:1
  }
});

Search.js-我要处理Search.js中的onChangeText事件

export default class Search extends Component<{}>{

  constructor(props){
    super(props);
  }

  render(){

    return(
      <View style={styles.Container}>

      </View>
    );
  }
}
const styles = StyleSheet.create({
  Container:{
    flex:1,
  },
  StatusBar:{
    marginTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight,
    backgroundColor:'#171F33'
  }
});

Answer 1

每次文本更改时，您onChangeText上的SearchBar中的函数SearchHeader.js都会被触发。因此您可以将onChangeText作为道具传递的另一个函数传递给Search.js属性。

在您的onChangeText={this.props.onChangeText}中添加SearchHeader.js

在Search.js中创建箭头函数，并将其作为道具传递给SearchHeader.js组件：

 export default class Search extends Component<{}>{    
   constructor(props){
     super(props);
   }

   onChangeText = (newText) => {
     //your custom logic here
     console.log(newText);
   }

   render(){    
    return(
     <View style={styles.Container}>
      <SearchHeader 
        onChangeText={this.onChangeText}
      />
     </View>
    );
   }
 }

 const styles = StyleSheet.create({
   Container:{
    flex:1,
   },
  StatusBar:{
   marginTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight,
   backgroundColor:'#171F33'
  }
});

如何从react-native中的导航处理搜索栏onchangetext事件？

1 个答案: