React Native - 访问包装的组件方法

Question

我正在尝试使用自定义输入组件将焦点转移到表单中的第二个字段。但是，我似乎无法访问我在自定义 class 中扩展的 focus() 或 TextInput 的其他方法。我已经看到了一些关于 ref 转发以及在 class 中实现 focus() 函数的信息，但两者都无法正常工作。

每当我尝试点击键盘上的 "next" 按钮时，它都会提示焦点不是函数。任何帮助或参考将不胜感激。

<View>
    <CustomInput
    onRef={ref => (this.child = ref)}
    autoCapitalize={'none'}
    returnKeyType={'next'}
    autoCorrect={false}
    onSubmitEditing={() => this.lastNameInput.focus()}
    updateState={(firstName) => this.setState({firstName})}
    blurOnSubmit={false}
    />
    <CustomInput
    onRef={ref => (this.child = ref)}
    autoCapitalize={'none'}
    returnKeyType={'done'}
    autoCorrect={false}
    updateState={(lastName) => this.setState({lastName})}
    ref={(input) => { this.lastNameInput = input; }}
    onSubmitEditing={(lastName) => this.setState({lastName})}
    />
</View>

export default class UserInput extends Component {

    render() {

        return (
           <View style={styles.inputWrapper}>
            <TextInput
              style={styles.input}
              autoCorrect={this.props.autoCorrect}
              autoCapitalize={this.props.autoCapitalize}
              returnKeyType={this.props.returnKeyType}
              placeholderTextColor="white"
              underlineColorAndroid="transparent"
              onChangeText={(value) => this.props.updateState(value)}
              blurOnSubmit={this.props.blurOnSubmit}
            />
          </View>
        );
    }

}

Answer 1

您需要对这两个组件进行一些更改。根据

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

class UserInput extends Component {
componentDidMount() {
    if (this.props.onRef != null) {
        this.props.onRef(this)
    }
}

onSubmitEditing() {
    if(this.props.onSubmitEditing){
        this.props.onSubmitEditing();
    }
}

focus() {
    this.textInput.focus()
}

render() {

    return (
        <View style={{ flex: 1 }}>
            <TextInput
                style={{ height: 100, backgroundColor: 'pink' }}
                autoCorrect={this.props.autoCorrect}
                autoCapitalize={this.props.autoCapitalize}
                returnKeyType={this.props.returnKeyType}
                placeholderTextColor="white"
                underlineColorAndroid="transparent"
                onChangeText={(value) => this.props.updateState(value)}
                blurOnSubmit={this.props.blurOnSubmit}
                ref={input => this.textInput = input}
                onSubmitEditing={this.onSubmitEditing.bind(this)}
            />
        </View>
    );
  }

}

export default class OrderScreen extends Component {

constructor(props) {
    super(props);

    this.focusNextField = this.focusNextField.bind(this);
    this.inputs = {};
}


focusNextField(id) {
    this.inputs[id].focus();
}

render() {
    return (
        <View style={{ flex: 1 }}>
            <UserInput
                autoCapitalize={'none'}
                returnKeyType={'next'}
                autoCorrect={false}
                updateState={(firstName) => this.setState({ firstName })}
                blurOnSubmit={false}
                onRef={(ref) => { this.inputs['projectName'] = ref; }}
                onSubmitEditing={() =>    {this.focusNextField('projectDescription');}}
            />
            <UserInput
                onRef={(ref) => {this.inputs['projectDescription'] = ref}}
                autoCapitalize={'none'}
                returnKeyType={'done'}
                autoCorrect={false}
                updateState={(lastName) => this.setState({ lastName })}
            />
        </View>
    )
 }
}

React Native - 访问包装的组件方法

React Native - Access Wrapped Component Methods

react-native

react-native-textinput