Question

一个非常简单的问题，当我在虚拟键盘上按“搜索”时，为什么onSubmitEditing没有触发？

当前没有抛出任何错误，并且onSearch（）中的console.log永远不会触发。

我正在使用EXPO SDK v.29。

import React from 'react';
import { StyleSheet, Text, View, TextInput, ScrollView, Image } from 'react-native';
import { WebBrowser } from 'expo';
import Icon from 'react-native-vector-icons/Ionicons';

import Styles from 'app/constants/Styles';
import Vars from 'app/constants/Vars';

import Menu from 'app/components/Menu';
import MiniMap from 'app/components/MiniMap';

import NewsList from 'app/components/NewsList';

import {get, post} from 'app/helpers/api';


 export default class HomeScreen extends React.Component {

    static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: (<Image style={{width: 132, height: 30}} source={require('./../../assets/images/header_image.png')}/>)
        };
    };

    constructor(props) {
        super(props);

        this.state = {
            menu: [],
            loadingMenu: true,
            searchString: '',
        };
    }

    onMenuPress = (item) => {
        let next;
        let route = item.page_type.slice(4);

        if(route == "PageExternal") {
            WebBrowser.openBrowserAsync(item.page.url);
        } else {

            data = item.page;

            if(item.children.length > 0) {
                route = 'Menu';
                data = item.children;
            }

            this.props.navigation.navigate(route, {
                data: data,
                title: item.title
            });
        }
    }

    onSearch = (e) => {
        console.log('onSearch', e);
        //WebBrowser.openBrowserAsync('https://www.1177.se/Halland/Sok/?q=Diabetes&submitted=true');
    }

    async componentDidMount() {

        console.log('Eat my shorrs');
        menuitems = await get('content/menu');

        this.setState({
            menu: menuitems,
            loadingMenu: false,
        })

        //this._getMenu();
    }

    render() {

        return (
            <ScrollView style={Styles.whiteBackground}>
            <View style={[Styles.blueBackground, Styles.topPadding, Styles.horizontalPadding]}>
                    <View style={[Styles.searchBox, Styles.bottomMargin]}>
                        <View style={Styles.searchField}>
                            <TextInput
                                style = {Styles.searchInput}
                                placeholder = "Sök sjukdom/behandling"
                                onSubmitEditing = {(e) => (this.onSearch(e))}
                                underlineColorAndroid = "transparent"
                                returnKeyLabel = "Sök på 1177"
                                returnKeyType = "search"
                            />

                            <Icon style = {Styles.searchIcon} name = "ios-search" size={18}/>
                        </View>

                        <Text style={[Styles.searchLabel]}>Söksvaren kommer från 1177.se</Text>
                    </View>

                    <Menu
                        data={this.state.menu}
                        loading={this.state.loadingMenu}
                        style={Styles.topPadding}
                        onItemPress={this.onMenuPress}
                    />
                </View>

                <Text style={[Styles.h1, Styles.blackText, Styles.horizontalPadding]}>Hitta till oss</Text>
                <MiniMap navigation={this.props.navigation}></MiniMap>


                <Text style={[Styles.h1, Styles.blackText, Styles.horizontalPadding]}>Nyheter</Text>
                <NewsList navigation={this.props.navigation}></NewsList>

            </ScrollView>
        );
    }
}

Answer 1

<TextInput
    onSubmitEditing = {(event) => (this.onSearch(event.nativeEvent.text))}
    multiline={false}
/>

在指定multiline={true}时它不起作用，也许您的样式具有该功能。请参见 Documentation
您将使用event.nativeEvent.text

Answer 2

尝试更改

onSubmitEditing = {(e) => (this.onSearch(e))}

到

onSubmitEditing = {this.onSearch}

Answer 3

然后保留

onSubmitEditing = {(e) => this.onSearch(e)}

像这样，尝试通过更改如下功能

function onSearch(e) {
    console.log('onSearch', e);
    //WebBrowser.openBrowserAsync('https://www.1177.se/Halland/Sok/?q=Diabetes&submitted=true');
}

希望这会起作用

Answer 4

检查一下

https://snack.expo.io/@raajnadar/submit-text-input

渲染方法

render() {
    return (
      <View style={styles.container}>
        <TextInput
          placeholder="Sök sjukdom/behandling"
          onSubmitEditing={this.onSearch}
          underlineColorAndroid="transparent"
          returnKeyLabel="Sök på 1177"
          returnKeyType="search"
          style={{ width: '100%', textAlign: 'center' }}
        />
      </View>
    );
}

提交功能

onSearch() {
  console.log('onSearch')
}

onSubmitEditing永远不会触发？

4 个答案: