对自定义组件中的本地访问引用进行反应

让我们从CustomTextInput组件开始。

export default class CustomTextInput extends Component {
componentDidMount() {
    if (this.props.onRef != null) {
        this.props.onRef(this)
    }
}
onSubmitEditing() {
    this.props.onSubmitEditing();
}
focus() {
    this.textInput.focus()
}

render() {
    return (
        <View>
            <View style={this.state.isFocused ? styles.onFocusedStyle : styles.onBlurStyle}>
                <TextInput
                    ref={input => this.textInput = input}
                    onSubmitEditing={this.onSubmitEditing.bind(this)}
                />
            </View>
            <Text style={styles.errorMessageField}>{this.state.errorStatus && this.props.errorMessage}</Text>
        </View>
    );
}}

这里我有一个示例customTextInput。这里需要注意的重要事项是render方法中TextInput视图中的componentDidMount（）、focus（）方法和ref属性。

1. componentDidMount（）方法将整个CustomTextInput组件的ref传递给其父组件。通过该引用，我们将从父组件调用CustomTextInput组件的焦点方法。

2. focus（）方法通过在CustomTextInput组件内使用textInput组件的ref来将textInput集中在CustomTextInput组件内。

3. TextInput的ref属性存储TextInput的引用。这个引用由focus（）方法使用。

现在让我们看看父组件

export default class ParentComponent extends Component {
constructor(props) {
    super(props);
    this.focusNextField = this.focusNextField.bind(this);
    this.inputs = {};
}

focusNextField(id) {
    this.inputs[id].focus();
}
render() {
    return (
        <ScrollView
            contentContainerStyle={{paddingBottom:100}}
            keyboardDismissMode={'on-drag'}
            scrollToTop={true}>
            <View>
                    <View style={{marginTop: 10}}>
                        <CustomTextInput
                            onRef={(ref) => {
                                this.inputs['projectName'] = ref;
                            }}
                            onSubmitEditing={() => {
                                this.focusNextField('projectDescription');
                            }}
                            />
                    </View>
                    <View style={{marginTop: 10}}>
                        <CustomTextInput
                            onRef={(ref) => {
                                this.inputs['projectDescription'] = ref;
                            }}
                            onSubmitEditing={() => {
                                this.focusNextField('subDivision');
                            }}
                        />
                    </View>
                    <View style={{marginTop: 10}}>
                        <CustomTextInput
                            onRef={(ref) => {
                                this.inputs['subDivision'] = ref;
                            }}
                            onSubmitEditing={() => {
                                this.focusNextField('plan');
                            }}
                           />
                    </View>
                    <View style={{marginTop: 10}}>
                        <CustomTextInput
                            onRef={(ref) => {
                                this.inputs['plan'] = ref;
                            }}
                    </View>
            </View>
        </ScrollView>
    );
}}

在父组件中，我们使用onRef属性存储每个CustomTextInput的ref，当按下键盘上的提交按钮时，我们调用下一个CustomTextInput中的焦点方法，CustomTextInput焦点方法将TextInput集中在子组件中。

这里有一个解决方案，您正在使用功能组件：

您的自定义组件需要使用React.forwardRef

const CustomTextInput = React.forwardRef((props, ref) => {
    return (
        <TextInput
            {...props}
            ref={ref}
        />
    );
});
export default CustomTextInput;

导入自定义组件的父组件：

import React, { createRef } from 'react';
const ParentComponent = () => {
    let customTextInputRef = createRef();
    return (
        <View>
            <CustomTextInput
                onSubmitEditing={() => customTextInputRef.current.focus()}}
            />
            <CustomTextInput
                ref={customTextInputRef}
            />
        </View>
    );
};

这里有一个对我有用的解决方案——基本上，您可以在自定义组件中创建一个引用，您可以从父组件中的引用中访问该引用：

let CustomTextInput = React.createClass({
    propTypes: {
        refName: React.PropTypes.string,
        returnKeyType: React.PropTypes.string,
        onSubmitEditing: React.PropTypes.func
    },
    getDefaultProps: function(){
        return {
            refName: "",
            returnKeyType: "default",
            onSubmitEditing: () => {}
        }
    },
    render: function(){
        return(
            <View>
                <TextInput 
                    ref="input"
                    returnKeyType={this.props.returnKeyType}
                    onSubmitEditing={this.props.onSubmitEditing}
                />
            </View>
        )
    }
});
module.exports = CustomTextInput

在父组件中：

let MyParent = React.createClass({
    render: function(){
        return(
            <View>
                <CustomTextInput
                    refName={'firstNameInput'},
                    returnKeyType={'next'}
                    onSubmitEditing={(event) => { 
                        this.lastNameInput.refs.input.focus();
                    }}
                />
                <CustomTextInput
                    refName={ref => this.lastNameInput = ref}
                />
            </View>
        )
    }
});

let CustomTextInput = React.createClass({
    componentDidMount() {
        // this is to check if a refName prop is FUNCTION; 
        if (typeof this.props.rex === "function") {
            this.props.refName(this.refs.inp);
        }
    }
    render: function() {
        return(
            <View>
                <TextInput ref={"inp"}/>
            </View>
        )
    }
});
let MyParent = React.createClass({
    render: function() {
        return (
            <View>
                <CustomTextInput
                    refName={ (firstNameInput) => this.firstNameInput = firstNameInput }
                />
            </View>
        )
    }
});

试试这个：

let AwesomeProject = React.createClass({
    onSubmitEditing:function(event){
        if (this.myTextInput !== null) {
          this.myTextInput.focus();
        }
    },
    render(){
        return(
            <View>
                <CustomTextInput
                    returnKeyType={'next'}
                    onSubmitEditing={this.onSubmitEditing}
                />
                <CustomTextInput
                    refName={(ref) => this.myTextInput = ref}
                />
            </View>
        )
    }
});