javascript - react native TextInput ref 错误，焦点不是函数

Question

我正在尝试以编程方式聚焦 TextInput 元素，在它安装后有一定的延迟，我有以下组件(显示输入和按钮的 View )

出于某种原因，这会出错

_this2.inputRef.focus is not a function

我不确定为什么。一件不合时宜的事情是，我得到流程说 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)

我使用的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%'
  }
})

下面是 this.innerRef 的样子，目前我没有看到任何 focus 属性

Answer 1

inputRef 是类实例的属性，在类方法中设置。

使用构造函数，例如:

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