Javascript React native TextInput ref错误，焦点不是函数

我试图以编程方式聚焦

TextInput

元素，在它挂载后有一定的延迟，我得到了以下组件（一个显示输入和按钮的视图）

出于某种原因，这会导致错误

_this2.inputRef.focus不是一个函数

我不知道为什么。一个不合适的地方是，我得到的流表示

createRef（）

在

React

上不存在，但我假设这只是缺少流定义，因为我正在使用

React 16.3.1

，这是在16.3中添加的，而且调用它时没有错误

// @flow
import React, { Component, Fragment } from 'react'
import Button from '../../composites/Button'
import TextInput from '../../composites/TextInput'
import OnboardingStore from '../../store/OnboardingStore'
import withStore from '../../store'
import { durationNormal } from '../../services/Animation'

/**
 * Types
 */
export type Props = {
  OnboardingStore: OnboardingStore
}

/**
 * Component
 */
class CharacterNameView extends Component<Props> {
  componentDidMount() {
    this.keyboardTimeout = setTimeout(() => this.inputRef.focus(), durationNormal)
  }

  componentWillUnmount() {
    clearTimeout(this.keyboardTimeout)
  }

  keyboardTimeout: TimeoutID
  inputRef = React.createRef()

  render() {
    const { OnboardingStore } = this.props
    return (
      <Fragment>
        <TextInput
          ref={this.inputRef}
          enablesReturnKeyAutomatically
          value={OnboardingStore.state.username}
          onChangeText={username => OnboardingStore.mutationUsername(username)}
          placeholder="Username"
          blurOnSubmit
          returnKeyType="done"
          onSubmitEditing={/* TODO */ () => null}
        />
        <Button disabled={!OnboardingStore.state.username} color="GREEN" onPress={() => null}>
          Create
        </Button>
      </Fragment>
    )
  }
}

export default withStore(OnboardingStore)(CharacterNameView)

/@flow
从“React”导入React，{Component，Fragment}
从“../../composites/Button”导入按钮
从“../../composites/TextInput”导入TextInput
从“../../store/OnboardingStore”导入OnboardingStore
使用存储从“../../store”导入
从“../../services/Animation”导入{durationNormal}
/**
*类型
*/
导出类型道具={
网上商店：网上商店
}
/**
*组成部分
*/
类CharacterNameView扩展了组件{
componentDidMount（）{
this.keyboardTimeout=setTimeout（（）=>this.inputRef.focus（），durationNormal）
}
组件将卸载（）{
clearTimeout（这个键盘超时）
}
键盘超时：超时ID
inputRef=React.createRef（）
render（）{
const{OnboardingStore}=this.props
返回(
OnboardingStore.mutationUsername（用户名）}
占位符=“用户名”
blurOnSubmit
returnKeyType=“完成”
onSubmitEditing={/*TODO*/（）=>null}
/>
null}>
创造
)
}
}
使用存储导出默认值（OnboardingStore）（CharacterNameView）

我使用的TextInput组件是从此文件导入的

// @flow
import React, { Component } from 'react'
import { StyleSheet, TextInput as Input } from 'react-native'
import RatioBgImage from '../components/RatioBgImage'
import { deviceWidth } from '../services/Device'

/**
 * Types
 */
export type Props = {
  style?: any
}

/**
 * Component
 */
class TextInput extends Component<Props> {
  static defaultProps = {
    style: null
  }

  render() {
    const { style, ...props } = this.props
    return (
      <RatioBgImage source={{ uri: 'input_background' }} width={70} ratio={0.1659}>
        <Input
          {...props}
          placeholderTextColor="#4f4a38"
          selectionColor="#797155"
          autoCapitalize="none"
          autoCorrect={false}
          keyboardAppearance="dark"
          style={[styles.input, style]}
        />
      </RatioBgImage>
    )
  }
}

export default TextInput

/**
 * Styles
 */
const styles = StyleSheet.create({
  input: {
    width: '96.4%',
    height: '97.45%',
    color: '#797155',
    fontSize: deviceWidth * 0.043,
    marginLeft: '1%',
    paddingLeft: '5%'
  }
})

/@flow
从“React”导入React，{Component}
从“react native”导入{样式表，TextInput作为输入}
从“../components/RatioGimage”导入RatioGimage
从“../services/Device”导入{deviceWidth}
/**
*类型
*/
导出类型道具={
风格？：有吗
}
/**
*组成部分
*/
类TextInput扩展组件{
静态defaultProps={
样式：空
}
render（）{
const{style，…props}=this.props
返回(
)
}
}
导出默认文本输入
/**
*风格
*/
const styles=StyleSheet.create({
输入：{
宽度：“96.4%”，
身高：97.45%，
颜色：“#797155”，
fontSize:deviceWidth*0.043，
marginLeft:'1%'，
paddingLeft:'5%'
}
})

下面是这个.innerRef看起来的样子，我现在没有看到它的任何焦点属性

---

inputRef

是类实例的属性，请在类方法中设置它

使用构造函数，例如：

class CharacterNameView extends Component<Props> {
  constructor() {
    this.inputRef = React.createRef()
  }
  ...
}

class CharacterNameView扩展组件{
构造函数（）{
this.inputRef=React.createRef（）
}
...
}

我的问题在于使用

React.createRef（）

并假设我在子组件上设置它。不幸的是，我遗漏了我必须在子组件中使用的部分文档，因此ref设置正确。

请尝试

this.inputRef.current.focus（）

或使用

React查找
TextInput
的节点句柄。通过传递
TextInput
的ref，findNodeHandle

旧版本的functional ref是否有效？我还注意到您的

TextInput

是从不同的文件导入的。你也可以发布代码吗？@bennygenel完全忘记了这一部分，我把它添加到了问题中，但是它通过了所有的道具，比如ref来反应本地输入。我不认为这是一个问题，我的语法是es6/7的一部分，它正确地定义了ref，但没有关注它