javascript - 在自定义组件中 react native 访问引用

Question

我有一个自定义的 TextInput。当我编辑第一个 TextInput 并点击键盘中的“下一步”时，我希望它聚焦第二个 TextInput。我之前在 Stack Overflow 中搜索过，似乎我可以使用 ref 来完成。但是我不确定如何使用自定义 TextInput 来做到这一点。

这是我的基本 CustomTextInput 代码:

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={this.props.refName}
                    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.refs.lastNameInput.focus();
                    }}
                />
                <CustomTextInput
                    refName={'lastNameInput'}
                />
            </View>
        )
    }
});

现在，当我在键盘上按下 Next 时，在选择 firstName 之后，我得到了一个异常:

undefined is not an object (evaluating '_this2.refs.lastNameInput.focus')

我不确定我在那里做错了什么。感谢任何帮助。 :)

Answer 1

让我们从 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。这里需要注意的重要事项是渲染方法中 TextInput View 中的 componentDidMount()、focus() 方法和 ref 属性。

1. componentDidMount() 方法将整个 CustomTextInput 组件的引用传递给它的父组件。通过该引用，我们将从父组件调用 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 的引用，当按下键盘上的提交按钮时，我们调用下一个 CustomTextInput 的焦点方法，CustomTextInput 的焦点方法将 TextInput 聚焦在子组件内。