1

カスタム入力コンポーネントを使用して、フォームの 2 番目のフィールドにフォーカスを移動しようとしています。ただし、カスタム クラスで拡張しているfocus()やその他のメソッドにアクセスできないようです。TextInput参照転送とfocus()クラス内での関数の実装に関する情報を見てきましたが、どちらもまだ機能していません。

キーボードの「次へ」ボタンを押そうとすると、フォーカスは機能ではないと表示されます。任意のヘルプまたはリファレンスをいただければ幸いです。

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

}
4

1 に答える 1

1

両方のコンポーネントでいくつかの変更を行う必要があります。https://stackoverflow.com/a/49810837/2083099によると

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>
    )
 }
}
于 2018-09-26T02:36:52.933 に答える