美文网首页
点击键盘的return键直接切换到下一个文本框(键盘不收回)

点击键盘的return键直接切换到下一个文本框(键盘不收回)

作者: YHWXQ简简单单的生活 | 来源:发表于2017-03-22 15:27 被阅读49次

今天,碰到一个需求:登录界面,输入账号之后点击键盘的确定/next按钮切换到密码输入框
代码如下:

const dismissKeyboard = require('dismissKeyboard');

  dismissKeyboardClick = () => {
    dismissKeyboard();
  }

  focusNext = (nextField) => {
    this.refs[nextField].focus();
  }

  render() {
    return (
      <TouchableOpacity style={{ flex: 1 }} activeOpacity={1} onPress={() => this.dismissKeyboardClick()}>
        <View
          style={styles.container}
        >
          <View style={styles.flex}>
            <View style={styles.logoViewStyle}>
              <Image
                style={styles.logoStyle}
                source={logo}
              />
              <Text style={styles.title}>{this.state.loginTitle}</Text>
            </View>
          </View>
          <View style={styles.inputView}>
            <View style={[styles.view, styles.lineTopBottom]}>
              <Text style={styles.text}>账号:</Text>
              <TextInput
                style={styles.textInputStyle}
                underlineColorAndroid="white"
                placeholder="请输入账号"
                clearButtonMode="while-editing"
                secureTextEntry={false}
                returnKeyType="next"
                onSubmitEditing={() => this.focusNext('password')}
                onChangeText={(text) => {
                  this.setState({
                    username: text
                  });
                }}
                value={this.state.username}
              />
            </View>
            <View style={[styles.view, styles.lineTopBottom]}>
              <Text style={styles.text}>密码:</Text>
              <TextInput
                ref="password"
                style={styles.textInputStyle}
                underlineColorAndroid="white"
                placeholder="请输入密码"
                clearButtonMode="while-editing"
                secureTextEntry
                returnKeyType="go"
                onSubmitEditing={() => this.clickLoginBtn()}
                onChangeText={(text) => {
                  this.setState({
                    password: text
                  });
                }}
                value={this.state.password}
              />
            </View>
          </View>
          <View style={styles.buttonView}>
            <TouchableOpacity
              style={styles.button}
              onPress={() => this.clickLoginBtn()}
            >
              <Text style={styles.buttonText}>登 录</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.changeRoleView}>
            <TouchableOpacity
              style={styles.changeRolebutton}
              onPress={() => this.changeRole(0)}
            >
              <Text style={styles.changeRoleText}>医疗端</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.changeRolebutton}
              onPress={() => this.changeRole(1)}
            >
              <Text style={styles.changeRoleText}>客服端</Text>
            </TouchableOpacity>
          </View>
        </View>
      </TouchableOpacity>
    );
  }

相关文章

网友评论

      本文标题:点击键盘的return键直接切换到下一个文本框(键盘不收回)

      本文链接:https://www.haomeiwen.com/subject/cnkwittx.html