在自定义组件中反应本机访问引用

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不是对象(评估'_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.这里要注意的重要事项是renderDidMount(),focus()方法和render方法中TextInput视图中的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的focus方法,CustomTextInput的focus方法将TextInput聚焦在子组件内.

Answer 2

尝试这个：

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>
        )
    }
});