Get the value from TextIput

Question

I want to be able to retrieve the value of the text after the user presses enter/return.

I tried the following ...

class HomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text:''
        }
    }

    callTextSubmit = (val) => {
        console.log('callTextSubmit ', val);
    };

    render() {              
        return (
            <View>
                <TextInput
                    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                    onChangeText={(text) => this.setState({ text })}
                    onSubmitEditing={(text) => this.callTextSubmit(text)}
                    value={this.state.text}
                />
            </View>
        )
  }
}

This returns the following... from the console log.

Proxy {dispatchConfig: {…}, _targetInst: FiberNode, isDefaultPrevented: ƒ, isPropagationStopped: ƒ, _dispatchListeners: ƒ, …}
>[[Handler]]:Object
>[[Target]]:Class
>[[IsRevoked]]:false

I want to access the value from the text input, is there a workaround to this? Thank you

Answer 1

The argument for the onSubmitEditing handler is the event, not the current input.

Since you set the state variable text each time the TextInput is changed, you can just use the text variable in your state instead.

callTextSubmit = () => {
  console.log('callTextSubmit ', this.state.text);
};