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属性。

componentDidMount（）方法将整个CustomTextInput组件的ref传递给它的父组件。通过该引用，我们将从父组件调用CustomTextInput组件的焦点方法。
focus（）方法在此处通过使用CustomTextInput组件内的TextInput组件的ref将textInput集中在CustomTextInput组件中。
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 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>
        )
    }
});

Answer 3

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

Answer 4

试试这个：

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

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

4 个答案: