CODEWITHSUNDEEP
react-native
Mathew
Mathew

Reputation: 1430

react native, TextInput setting onChangeText to function

I have the following component in which I am trying to set the onSubmitEditing function of a TextInput element to a custom function called func. I would like it to take the content of the TextInput box as input to the function. How can this be done? Below is my failed attempt at doing so:

export default class Component4 extends Component {
    func(input){
        // will add stuff here later
    }

    render(){
        return (
            <View style={{padding: 30}}>
                <TextInput placeholder="default" onSubmitEditing=this.func/>
            </View>
        );
    }
}

PS:

Thanks to everyone so far for the help, I've managed to get it working partly, here is my code now:

export default class Component4 extends Component {
    constructor(props) {
        super(props);
        this.state = {thing: 'asdf'};
    }

    func(input){
        this.state.thing = input;
        // I will eventually do more complicated stuff here
    }

    render(){
        return (
            <View style={{padding: 30}}>
                <TextInput placeholder="default" onSubmitEditing={this.func}/>
                <Text>{this.state.thing}</Text>
            </View>
        );
    }
}

this gives an error, I am trying to make it so that state.thing gets set to the input. thanks

Upvotes: 0

Views: 1967

Answers (2)

Thakur Karthik
Thakur Karthik

Reputation: 3518

state={
         text:''
}
Func(e){
        text:e.target.value
 }
 onSubmitChange={this.func}

Don't forget to bind the func function

Upvotes: 0

Jerome Anthony
Jerome Anthony

Reputation: 8021

Option 1: <View style={{padding: 30}}> <TextInput placeholder="default" onSubmitEditing={this.func}/> </View>

Option 2: <View style={{padding: 30}}> <TextInput placeholder="default" onSubmitEditing {(e)=>this.func(e.target.value)}/> </View>

Upvotes: 1

Related Questions