Question

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

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

关于改变功能（我现在非常简单）：

 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表单字段：

 <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（）'）

Answer 1

使用输入到该输入字段的文本字符串调用来自TextInput的

onChangeText（），而不是使用事件对象

修改回答你关于如何处理这个的问题。您需要编辑onChange处理程序：

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

其中nextField是下一个输入的名称，您通过ref prop
提供
您还可以查看this SO post以获取更多信息：

Answer 2

好吧，经过几个小时的挣扎，我必须做的事情（正如我所说，我使用的是新的refs语法，React 16.3）。我创建了InputComponent，其中ref作为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代码输入：

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输入，它具有难以访问的focus（）和blur（）函数。最后 - 我的六个领域之一：

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

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

React Native，redux form，native base - onChange（event）函数不起作用，undefined不是评估event.target.value的对象

2 个答案: