How do I read an already populated TextInput in React-Native?

Question

I have a TextInput below : Normally I am able to read TextInput when there is a change , the problem is the TextInput for password is populated with a default password . So the user may not need to edit(change) it - therefore not triggering onChangeText method .

import React,{Component} from 'react' import {View, Text, TextInput } from 'react-native' export default class App extends Component { constructor(props){ super(props); this.state = { username: '', password: 12345 } } onChangeText = (key, val) => { this.setState({ [key]: val}) } render() { return ( <View style={styles.container}> <Text>Login Form</Text> <TextInput placeholder='Username' onChangeText={val => this.onChangeText('username', val)} style={styles.input} value={this.state.username} /> <TextInput placeholder='Password' onChangeText={val => this.onChangeText('password', val)} style={styles.input} value={this.state.password} secureTextEntry={true} /> </View> ); } }

Now , my question is how do I read TextInputs which are not being changed ?

@DaggieBlanqx Just use this.state.password at the place you are making API call. For example something like this...login(this.state.username, this.state.password). You should show API call code, to get exact answer. — Freddy
– Freddy, Commented Feb 23, 2019 at 9:07
@Freddy while this works , is there not a way to directly read what the input has like how we do in html document.getElementById('passwordInput').value ? — Daggie Blanqx - Douglas Mwangi
– Daggie Blanqx - Douglas Mwangi, Commented Feb 23, 2019 at 9:14
@DaggieBlanqx I don't think there is any such out-of-box method to do it. You can use something like formik to make form handling little easier. — Freddy
– Freddy, Commented Feb 23, 2019 at 9:20

iambinodstha · Accepted Answer · 2019-02-23 10:06:07Z

change TextInput value prop to defaultValue. i think that might work. TextInput value prop does't allow to modify existing value.

<TextInput placeholder='Password' onChangeText={val => this.onChangeText('password', val)} style={styles.input} defaultValue={this.state.password} secureTextEntry={true} />

abadalyan · Accepted Answer · 2019-02-23 13:10:03Z

There is a way to get TextInput value directly from the component via refs.

If the input receives text from value prop you can use _lastNativeText method as in the example below.

export default class App extends Component { state = { text: 'Hello!' } constructor(props) { super(props); this.inputRef = React.createRef(); } componentDidMount() { this.printTextInputValue(); } printTextInputValue = () => { const input = this.inputRef.current; console.log(input._lastNativeText); } render() { return ( <View style={styles.container}> <TextInput value={this.state.text} ref={this.inputRef} /> <Button onPress={this.printTextInputValue} title="Get input value" /> </View> ); } }

If the TextInput uses defaultValue prop use _getText method to read the initial value.

export default class App extends Component { constructor(props) { super(props); this.inputRef = React.createRef(); } componentDidMount() { this.printDefaultInputValue(); } printDefaultInputValue = () => { const input = this.inputRef.current; console.log(input._getText()); } printTextInputValue = () => { const input = this.inputRef.current; console.log(input._lastNativeText); } render() { return ( <View style={styles.container}> <TextInput defaultValue="Hello Default!" ref={this.inputRef} /> <Button onPress={this.printTextInputValue} title="Get input value" /> </View> ); } }

Do note however that these methods are not officially documented and may be removed in future versions of React Native, so use them at your own discretion.

Collectives™ on Stack Overflow

How do I read an already populated TextInput in React-Native?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related