React Native，redux form，native base - onChange(event) 函数不起作用，undefined 不是评估 event.target.value 的对象 [英] React Native, redux form, native base - onChange(event) function doesnt work,undefined is not an object evaluating event.target.value

问题描述

已更改，仍然没有答案我按照这个例子:https://jsfiddle.net/4np9u17g/11/我想让它像那里一样 - 输入值后焦点应该转到下一个输入.我使用了 refs 和 redux 表单的新语法，我做错了什么?

CHANGED, STILL NO ANSWER I followed this example: https://jsfiddle.net/4np9u17g/11/ 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();
}

};

输入组件:

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

最后是我的 redux 表单字段之一:

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

然后我收到一个错误

undefined 不是函数(评估 '_this.field3.focus()')

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

推荐答案

好吧，经过几个小时的努力，我不得不这样做(正如我所说，我正在使用新的 refs 语法，React 16.3).我已经创建了 InputComponent 与作为道具传递的 ref :

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;

然后在我实现 pin 码输入的组件中:

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();
    }
  };

这里的问题是这个可怕的 NativeBase Input，它的 focus() 和 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
 />

现在，当用户输入一些数字时，它会转到下一个输入，当他或她在最后一个字段中输入时，blur() 函数会运行.

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.

这篇关于React Native，redux form，native base - onChange(event) 函数不起作用，undefined 不是评估 event.target.value 的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！