validateTrigger 'onBlur' can't use In react-native TextInput

[ColinChen2]

I use the example of the react-native. After add validateTrigger, the value always to be empty, when the TextInput blur.

"react": "^16.2.0", "react-native": "0.53.3", "rc-form": "^2.1.7",

{getFieldDecorator('username', {
          validateFirst: true,
          validateTrigger: 'onBlur', // **add code here**
          rules: [
            { required: true, message: '请输入手机号!' },
            {
              pattern: /^1\d{10}$/,
              message: '请输入正确的手机号!',
            },
            {
              validator: (rule, value, callback) => {
                this.checkUserNameOne(value, callback);
              },
              message: '手机号已经被注册!',
            },
          ],
        })(
          <FromItem
            autoFocus
            placeholder="手机号"
            error={getFieldError('username')}
          />
        )}

Can you help me to explain it?

[benjycui]

Please provide a re-producible repo.

[ColinChen2]

Ok, here is repo: https://snack.expo.io/Byptk4Ghf.

When I add onBlur in the textInput, the value will be undefined. But if I remove the onBlur, No valid trigger, when textInput blur.

[fwh1990]

I got the same problem.

[fwh1990]

Do anybody have plan to fix this problem? No more commits were created since April 4.

[jembach]

I had the same Problem. You can solve it with this component instead of FromItem:

import React from 'react';
import PropTypes from 'prop-types';
import { TextInput } from 'react-native';

class TextInputValidate extends React.PureComponent {
  state = {};

  value = '';

  constructor(props) {
    super(props);
    this.value = props.value;
  }

  static getDerivedStateFromProps(props) {
    this.value = props.value;
    return null;
  }

  render() {
    const { onChange, onBlur, inputRef, ...props } = this.props;
    return (
      <TextInput
        {...props}
        value={this.value}
        ref={inputRef}
        onChangeText={text => {
          this.value = text;
          onChange(text);
        }}
        onBlur={() => {
          onBlur(this.value);
        }}
      />
    );
  }
}

TextInputValidate.defaultProps = {
  onChange: () => {},
  onBlur: () => {},
  inputRef: () => {},
  value: ''
};

TextInputValidate.propTypes = {
  onChange: PropTypes.func,
  onBlur: PropTypes.func,
  inputRef: PropTypes.func,
  value: PropTypes.string
};

export default TextInputValidate;