21341

React Native, redux form, native base - onChange(event) function doesnt work,undefined is not an obj

Question:

<strong>CHANGED, STILL NO ANSWER</strong> I followed this example: <a href="https://jsfiddle.net/4np9u17g/11/" rel="nofollow">https://jsfiddle.net/4np9u17g/11/</a> I want to make it like there - after inputing value focus should go to next input. I use new syntax of refs and redux form, what am i doing wrong?

constructor() { super(); this.field1 = React.createRef(); this.field2 = React.createRef(); this.field3 = React.createRef(); this.field4 = React.createRef(); this.field5 = React.createRef(); this.field6 = React.createRef(); }

On change function (I made it really simple for now):

onChange = (text) => { if (text.length === 1) { this.field3.focus(); }

};

Input component:

InputComponent = ({ input, meta, ...rest }) => ( <Input {...rest} keyboardType="numeric" maxLength={1} value={input.value} onChangeText={input.onChange} /> );

And finally one of my redux form fields:

<Field maxLength={ id="2" ref={this.field1} style={styles.input} name="pinSix1" component={this.InputComponent} placeholder="*" onChange={this.onChange} secureTextEntry /> <Field id="3" ref={this.field2} style={styles.input} name="pinSix2" component={this.InputComponent} placeholder="*" onChange={this.onChange} secureTextEntry />

And I get an error

<blockquote>

undefined is not a function (evaluating '_this.field3.focus()')

</blockquote>

Answer1:

onChangeText() from TextInput is called with the text string which is inputted into that input field, not with an event object

<strong>Edit</strong> To answer your question on how to handle this. You will need to edit your onChange handler:

onChange = (text) => { if (text.length === this.maxLength /* or wherever maxLength comes from */ ) { this.refs[nextField].focus() } };

Where nextField the name of the next input is, which you provide through the ref prop

You can also see <a href="https://stackoverflow.com/questions/32748718/react-native-how-to-select-the-next-textinput-after-pressing-the-next-keyboar" rel="nofollow">this SO post</a> for more information:

Answer2:

Okey, after hours of struggling here's what I had to do (As i said I am using new syntax of refs, React 16.3). I have created InputComponent with ref passed as props:

import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { Input } from 'native-base'; class InputComponent extends PureComponent { static navigationOptions = { header: null, }; render() { const { input, externalRef, ...rest } = this.props; return ( <Input {...rest} ref={externalRef} keyboardType="numeric" maxLength={1} value={input.value} onChangeText={input.onChange} /> ); } } InputComponent.propTypes = { input: PropTypes.object, externalRef: PropTypes.object, }; export default InputComponent;

Then in my component where pin code inputs are implemented:

constructor() { super(); this.field0 = React.createRef(); this.field1 = React.createRef(); this.field2 = React.createRef(); this.field3 = React.createRef(); this.field4 = React.createRef(); this.field5 = React.createRef(); } componentDidMount() { this.field0.current._root.focus(); } onChange = (text, val, body, name) => { if (text.length === 1 && name !== '6') { this[`field${name}`].current._root.focus(); } else if (text.length === 1 && name === '6') { this.field5.current._root.blur(); } };

The issue here is was this horrible NativeBase Input which has the focus() and blur() function hard to access. Finally - one of my six Fields:

<Field externalRef={this.field0} style={styles.input} name="1" component={InputComponent} placeholder="*" onChange={this.onChange} secureTextEntry />

Right now when user inputs some numbers it goes to the next input and when he or she inputs in the last Field the blur() function runs.

Recommend

  • Clear React Native TextInput
  • React-native dismiss Keyboard when focus out / clicked somewhere else, outside textfield
  • how to pass data to another screen using react native router flux?
  • Angular2 the for attribute on a label does not link it to the input
  • Assign different values to cell arrays in MATLAB at once
  • big integers when reading file with readr in r
  • how to calculate month difference in R
  • How to produce a Code 39 that can be reliably read after faxing
  • How to check a string does not start with a number in Batch?
  • How to write .bin file in R and open it in Fortran
  • Remove past Matplotlib plots in the same cell in Jupyter Notebook involving interactive widgets
  • TEdit Input Validation on C++ Builder XE8
  • How to negative match regex in JavaScript string replace? [duplicate]
  • How to restrict number of concurrent processes?
  • Plot a table with R
  • Selenium and Google - How do you use cookies?
  • OpenCL kernel not vectorized
  • addressing in assembler
  • Polymer paper-input and form submission
  • Use neo4j server instead of embedded mode
  • Neo4j: Filter nodes based on aggregate function
  • What is corresponding c++ data type to SQL numeric(18,0) data type?
  • Monotouch crashes with NullReferenceException on non nullable object
  • Access object instance inside an event handler
  • Extract All Possible Paths from Expression-Tree and evaluate them to hold TRUE
  • How to get links to open in the native browser in iOS Meteor apps?
  • How to remove a SwiftyJSON element?
  • Appending Character to Character Array In C
  • How can I send an e-mail from a vbs script
  • Sails.js/waterline: Executing waterline queries in toJSON function of a model?
  • Retrieving value from sql ExecuteScalar()
  • Can Jackson SerializationFeature be overridden per field or class?
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • KeystoneJS: Relationships in Admin UI not updating
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Hits per day in Google Big Query
  • how does django model after text[] in postgresql [duplicate]
  • How to stop GridView from loading again when I press back button?
  • Checking variable from a different class in C#