react native, TextInput setting onChangeText to function

Question

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

Jerome Anthony · Accepted Answer · 2018-06-12 05:46:42Z

1

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>

answered Jun 12, 2018 at 5:46

Jerome Anthony

8,0912 gold badges44 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thakur Karthik · Accepted Answer · 2018-06-12 05:54:14Z

0

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

Don't forget to bind the func function

answered Jun 12, 2018 at 5:54

Thakur Karthik

3,6483 gold badges17 silver badges27 bronze badges

Collectives™ on Stack Overflow

react native, TextInput setting onChangeText to function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related