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

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 ?

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}
/>

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.

Related

Render a new value into TextInput React Native

I've got a react native form with a button that should autofill some of the field based on some user's information. The point is that even if I update the state variable related to a TextInput, the TextInput does not display such data. Here's a short snippet for the sake of simplicity
export default class Component extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null
}
}
autocompile = () => {
this.setState({"value": "new value"})
}
render() {
return (
<View>
<TouchableOpacity
onPress={() => {
this.autocompile
}}>
<Text>Autocompile</Text>
</TouchableOpacity>
<TextInput
onChangeText={(value) => this.setState({'value': value})}
value={this.state.value}
/>
</View>
)
}
}
}
Following this example, if I clicked "Autocompile", the TextInput below wouldn't show the new value, even though the state variable would be updated. My question is, how can I update a TextInput displayed value from the external without typing in?
Class Component Solution
import React from 'react';
import { Text, View, TextInput, TouchableOpacity } from 'react-native';
export default class Component extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
this.autocompile = this.autocompile.bind(this);
}
autocompile() {
this.setState({ value: 'new value' });
}
render() {
return (
<View>
<TouchableOpacity onPress={this.autocompile}>
<Text>Autocompile</Text>
</TouchableOpacity>
<TextInput
onChangeText={(value) => this.setState({ value: value })}
value={this.state.value}
/>
</View>
);
}
}
Function Component Solution
import React, { useState } from 'react';
import { View, TouchableOpacity, Text, TextInput } from 'react-native';
const App = () => {
const [value, setValue] = useState('');
const autocompile = () => setValue('new value');
return (
<View>
<TouchableOpacity onPress={() => autocompile()}>
<Text>Autocompile</Text>
</TouchableOpacity>
<TextInput onChangeText={(value) => setValue(value)} value={value} />
</View>
);
};
export default App;
You need to change this
autocompile = () => {
this.setState({"value": "new value"})
}
to
autocompile = () => {
this.setState({ value: 'new value' })
}
and this one also
onChangeText={(value) => this.setState({'value': value})}
to
onChangeText={(value) => this.setState({ value })}

How can I create a "global state" in react native so I can send a user input to another page?

I am trying to take a user input(email) and send it to the password page for display. I am under impression by attempt below is not working because the input is local and cannot be seen by the password page? How should I go about this? Something with reduxes? Am I on the right track?
If you guys need more code let me know, I appreciate any help more than you know!
Email page
constructor() {
super();
this.state = {
color1: '#A2A2A2',
inputValue: '', //add state here
};
}
updateInputValue = (event) => {
this.setState({
inputValue: event.target.value
});
}
navigateToCreatePasswordScreen = () => {
this.props.navigation.navigate("CreatePassword", {
inputValue: this.state.inputValue,
});
};
render() {
return (
<View style={styles.containerMain}>
{/* Email Input */}
<Container style = {styles.emailInput}>
<Form>
<Item floatingLabel >
<Label style={{color:this.state.color1}}>Email Address</Label>
<Input
value = {this.state.inputValue}
onChange={(this.updateInputValue)}
style={styles.textInput}
autoCorrect={false}
autoCapitalize="none"
onFocus={() => this.setState({color1: '#F7018D'})}
onBlur={() => this.setState({color1: '#A2A2A2'})}
/>
</Item>
</Form>
</Container>
<View style={styles.containerBottom}>
<ContinueButton
onPress={() => this.navigateToCreatePasswordScreen()}
/>
</View>
password page
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import ContinueButton from '../components/ContinueButton';
import BackArrow from '../components/BackArrow';
import { Container, Content, Header, Form, Input, Item, Label, } from 'native-base';
export default class CreatePasswordPage extends Component {
/* Colors Input label*/
constructor() {
super();
this.state = {
color1: '#A2A2A2'};}
render() {
const {inputValue} = this.props.route.params;
return (
<View>
<View>
<Text style={styles.caption}>{inputValue}</Text>
</View>
</View>

"undefined is not an object" when trying to access TextInput of the sibling component using references

in Parent component, I'm trying to focus the TextInput of second Child component when submit button is pressed in the TextInput of the first Child component but this error comes up: error message
Child.js
import React from "react";
import { View, TextInput} from "react-native";
export default class Child extends React.Component {
focus = ref => {
ref.input.focus();
};
render() {
return (
<View>
<TextInput
placeholder='enter text'
onSubmitEditing={() => {
this.focus(this.props.destinationRef);
}}
ref={input => {
this.input = input;
}}
/>
</View>
);
}
}
Parent.js
import React from "react";
import Child from "./Child";
import { View, StyleSheet } from "react-native";
export default class Parent extends React.Component {
// componentDidMount() {
// setTimeout(() => {
// this.two.input.focus();
// }, 3000);
// }
render() {
return (
<View style={styles.container}>
<Child
destinationRef={() => {
if (!this.two) return this.two;
}}
ref={input => {
this.one = input;
}}
/>
<Child ref={input => (this.two = input)} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
}
});
Note that when I uncomment the componendDidMount, second TextInput successfully focuses three seconds after mounting.
I think the problem in render update. In first render time destinationRef is undefined, parent state not updated or force updated so props not updated too.
I try little bit optimize your code. You can use arrow function to bind this:
import React from "react";
import Child from "./Child";
import { View, StyleSheet } from "react-native";
export default class Parent extends React.Component {
_makeFocus(){
this.two.input.focus();
}
handleOnSubmit(){
this._makeFocus();
}
render() {
return (
<View style={styles.container}>
<Child
onSubmit={this.handleOnSubmit.bind(this)}
ref={input => {
this.one = input;
}}
/>
<Child ref={input => (this.two = input)} />
</View>
);
}
}
I would change the logic a little bit since I think the ref is giving you problems.
Parent:
<View style={styles.container}>
<Child next={this.two} ref={comp => this.one = comp}/>
<Child next={this.one} ref={comp => this.two = comp}/>
</View>
Child:
<TextInput
placeholder='enter text'
onSubmitEditing={() => {
if (this.props.next)
this.props.next.focus();
}}
/>
EDIT:
Your approach was correct I believe, I would just update the parent into this:
export default class Parent extends React.Component {
constructor(props){
super(props);
this.references = {};
}
onFocus = (ref) => {
this.references[ref].focus();
}
render() {
return (
<View style={styles.container}>
<Child
destinationRef={'two'}
onFocus={this.onFocus}
ref={input => this.references['one'] = input}
/>
<Child ref={input => this.references['two'] = input} />
</View>
);
}
}
and your child to:
export default class Child extends React.Component {
render() {
return (
<View>
<TextInput
placeholder='enter text'
onSubmitEditing={() => {
this.props.onFocus(this.props.destinationRef);
}}
/>
</View>
);
}
}

Give Custom props to TextInput and use it on event handlers

I'm new to react native and trying event handling and came up with a problem.
Suppose I have a code like this
class Demo extends React.Component {
constructor(props) {
this.textValues = {a: null, b: null};
}
handleChange(event) {
this.textValues['a'] = this.props.customProps;
this.textValues['b'] = event.nativeEvent.text;
}
render() {
return (
<View>
<TextInput
customProps = 'T1'
onChange = {this.handleChange.bind(this)}
/>
<TextInput
customProps = 'T2'
onChange = {this.handleChange.bind(this)}
/>
</View>
)
}
}
I want to access textValues from parent component i.e., Demo as well as customProps from TextInput but
If I bind this with handleChange then this refrence to Demo class and this.props.customProps gives undefined
If I do not bind this with handleChange then this.textValues is not defined and this.props.customProps gives perfect value
But I want to acess both textValues of Demo and customProps of TextInput in handleChange function.
class Demo extends React.Component {
constructor(props) {
super(props);
this.textValues = { a: null, b: null };
}
handleChange = field => (event) => {
console.log(field)
this.textValues[field] = event.nativeEvent.text
}
render() {
return (
<View>
<TextInput onChange={this.handleChange('a')} />
<TextInput onChange={this.handleChange('b')} />
</View>
)
}
}
ReactDOM.render(
<Demo />,
document.getElementById('container')
);
do you want the handleChange function to know which TextInput is called from?
try these codes
<TextInput
customProps = 'T1'
onChange = {(input)=>{
this.handleChange("T1", input)
}}
/>
<TextInput
customProps = 'T2'
onChange = = {(input)=>{
this.handleChange("T2", input)
}}
/>
and the hanleChange function is
handleChange(inputTag, inputText) {...}

React Native:How to trigger TextInput instance blur in a method?

I click a button on the navigator, the current screen's one TextInput's is focus.
I need to set the TextInput's instance blur to trigger the textChange function to do something.
In my case, the cursor of TextInput is blinking all the time.
refs.username.blur() does not work.
My code :
class UploadRecordII extends Component{
static navigationOptions = ({ navigation, screenProps }) => ({
headerRight: (<Button containerStyle={{marginRight: 12,}} onPress={ UploadRecordII.onSubmit}>
<Text style={{color: 'white',fontSize: 18,}}>next</Text>
</Button>),
});
.....
static onSubmit() {
let that = UploadRecordII.instance;
debugger;
that.refs.username.blur();
debugger;
that.props.commitCreateRecordUpdate(that.refs.username._lastNativeText,that.imageList)
that.props.navigation.navigate('Record3');
}
...... in render(){
....
<TextInput ref = 'username' placeholder='' editable = {true} maxLength = {500}
keyboardType='default' multiline={true}
style={styles.input} underlineColorAndroid='rgba(0,0,0,0)'
onBlur={ ()=> this.textChange()}
clearButtonMode='always' placeholderTextColor='#D6D0D8'></TextInput>
...
}
refs don't work as strings anymore as expected. You need to define your ref e.g.
class UploadRecordII extends Component {
constructor(props) {
super(props);
this.usernameInput = null;
}
onSubmit() {
this.usernameInput.blur();
}
render() {
return (
<TextInput ref={(input) => this.usernameInput = input} ... />
)
}
}

Categories