未定义不是评估this.refs.input.isfocused

Question

我正在尝试制作一个CustomTextInput，它将由父组件调用。子组件将仅包含带有一些道具的TextInput。 这是我的代码：

CustomTextInput.js

import React, { Component } from "react";
import { TextInput } from "react-native";

class CustomTextInput extends Component {
  render() {
    return (
      <TextInput
        style={this.props.style}
        placeholder={this.props.placeholder}
        onChangeText={this.props.onChangeText}
        value={this.props.value}
        onBlur={this.props.onBlur}
        onChange={this.props.onChange}
        onFocus={this.props.onFocus}
      />
    );
  }
}
export default CustomTextInput;

ParentComponent.js

export default class ParentComponent extends BaseInput {
  render() {
    return (
      <CustomTextInput
        ref="input"
        value={value}
        onBlur={this._onBlur}
        onFocus={this._onFocus}
        onChange={this._onChange}
      />
    );
  }
}

BaseInput.js

export default class BaseInput extends Component {
  componentWillReceiveProps(newProps) {
    const isFocused = this.refs.input.isFocused();
    if (!isFocused) {
      alert("hi");
    }
  }
}

为什么this.refs.input是undefined？我该如何解决？