react native输入中的自定义输入组件未按预期工作

Question

I am trying to make a custom input component with onChangeText but whenever I start typing in the textInput box I get an error. I have checked the code many times and everything looks fine to me.

 import React from "react";
    import { TextInput, StyleSheet } from "react-native";

    const defaultInput = props => (
            <TextInput
            underlineColorAndroid="transparent"
            {...props}
            style={[styles.input, props.style]}
          />
        )
    const styles = StyleSheet.create({
      input: {
        width: "100%",
        borderWidth: 1,
        borderColor: "#eee",
        padding: 5,
        marginTop: 8,
        marginBottom: 8
      }
    });

    export default defaultInput;

This is my sub component where I am using my custom component.

import React, { Component } from "react";
import { View, TextInput, Button, StyleSheet } from "react-native";
import DefaultInput from "../UI/DefaultInput/DefaultInput";
const placeInput = props =>(
    <DefaultInput
      placeholder="Place Name"
      value={props.placeName}
      onChangeText={props.onChangeText}
    />
  )
export default placeInput;

This is the screen where I am using my sub component.

import React, { Component } from 'react'
import { Text, View, TextInput, Button, StyleSheet, ScrollView, Image } from 'react-native'
import { connect } from 'react-redux'
import placeImage from '../../asset/pic.jpg'
import PlaceInput from '../../component/PlaceInput/PlaceInput'
import { addPlace } from '../../store/actions/index'
import { Navigation } from 'react-native-navigation'
// import DefaultInput from '../../component/UI/DefaultInput/DefaultInput'
import HeadingText from '../../component/UI/HeadingText/HeadingText'
import MainText from '../../component/UI/MainText/MainText'
import PickImage from '../../component/PickImage/PickImage'
import PickLocation from '../../component/PickLocation/PickLocation'
class SharePlace extends Component {
    state={
      placeName:""
    }
    constructor(props) {
        super(props);
        this.props.navigator.setOnNavigatorEvent(this.OnNavigatorEvent);
    }
    placeNameChangedHandler = val => {
        this.setState({
          placeName: val
        });
      };
    OnNavigatorEvent = (event) => {
        console.log(event);
        if (event.type === "NavBarButtonPress") {
            if (event.id === "sideDrawerToggle") {
                this.props.navigator.toggleDrawer({
                    side: "left"

                })
            }

        }
    }

    placeAddedHandler = () => {
        if(this.state.placeName.trim() !== "")
        {
            this.props.onAddPlace(this.state.placeName);
        }

           }
    render() {
        return (
            // <ScrollView contentContainerStyle={styles.conatiner}>
            <ScrollView>
                <View style={styles.conatiner}>
                    <MainText>
                        <HeadingText>Share a place with us!</HeadingText>
                    </MainText>
                    <PickImage />
                    <PickLocation />
                    <PlaceInput
                     placeName={this.state.placeName}
                     onChangeText={this.placeNameChangedHandler}
                       />
                    <View style={styles.button}>
                        <Button title="share the place" onPress={this.placeAddedHandler} />
                    </View>
                </View>
            </ScrollView>
        );
    }

}

const styles = StyleSheet.create({
    conatiner: {
        flex: 1,
        alignItems: "center"
    },
    placeholder: {
        borderWidth: 1,
        borderColor: "black",
        backgroundColor: "#eee",
        width: "80%",
        height: 150
    },
    button: {
        margin: 8

    },
    imagePreview: {
        width: "100%",
        height: "100%"
    }

})

const mapDispatchToProps = dispatch => {
    return {
        onAddPlace: (placeName) => dispatch(addPlace(placeName))
    }
}

export default connect(null, mapDispatchToProps)(SharePlace)

This is the error I am getting.

ExceptionsManager.js:63 Invariant Violation: TextInput(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

This error is located at:

    in TextInput (at DefaultInput.js:5)
    in defaultInput (at PlaceInput.js:7)
    in placeInput (at SharePlace.js:60)
    in RCTView (at View.js:60)
    in View (at SharePlace.js:54)
    in RCTScrollContentView (at ScrollView.js:791)
    in RCTScrollView (at ScrollView.js:887)
    in ScrollView (at SharePlace.js:53)
    in SharePlace (created by Connect(SharePlace))
    in Connect(SharePlace) (at Navigation.js:83)
    in Provider (at Navigation.js:82)
    in _class2 (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

Answer 1

your code working fine as the way I ran it, maybe you have problem to import PlaceInput or DefaultInput:

 import React, { Component } from 'react'; import { View, Text, FlatList, ScrollView,TextInput, Image,StyleSheet } from 'react-native'; export default class Test extends Component { constructor(props) { super(props); this.state = { placeName: "" } } placeNameChangedHandler = val => { this.setState({ placeName: val }); }; render() { return ( <View> <PlaceInput placeName={this.state.placeName} onChangeText={this.placeNameChangedHandler} /> </View> ); } } const PlaceInput = props => ( <DefaultInput placeholder="Place Name" value={props.placeName} onChangeText={props.onChangeText} /> ) const DefaultInput = props => ( <TextInput underlineColorAndroid="transparent" {...props} style={[styles.input, props.style]} /> ) const styles = StyleSheet.create({ input: { width: "100%", borderWidth: 1, borderColor: "#eee", padding: 5, marginTop: 8, marginBottom: 8 } });