下一步并进入表单不起作用(React Native和native-base)

时间:2017-12-19 16:00:29

标签: react-native native-base

我正在使用native-base的表单来处理用户的用户名和密码。

当我从键盘按下一步时,它不会将光标移动到下一个或不提交输入。我们该如何解决这个问题?

import { Form } from 'native-base';
<Form style={styles.formStyle}>
    <AuthFieldInput
        placeholder="Username or Email"
        value={this.state.username}
        onChangeText={username => this.setState({username})}
        returnKeyType="next"/>
    <AuthFieldInput
        placeholder="Password"
        value={this.state.password}
        onChangeText={password => this.setState({password})}
        secureTextEntry
        returnKeyType="go"/>
</Form>

这是<AuthField>渲染功能

import { Item, Label, Input, Text } from 'native-base';
<Item>
  <Input
    value={value}
    onChangeText={onChangeText}
    placeholder={placeholder}
    autoCorrect={false}
    secureTextEntry={secureTextEntry}
    returnKeyType={returnKeyType}
  />
</Item>

谢谢!

3 个答案:

答案 0 :(得分:3)

我遇到错误,因为“ _this2.refs.password.focus”不是TextInput的onSubmitEditing上的函数。

这是我固定的方法:

  • 已将本机基础“ ^ 2.4.2”的程序包升级到本机基础“ ^ 2.7.1”。
  • 在下面共享我的示例代码:

<Item floatingLabel>
  <Label>Mobile Number</Label>
  <Input
    onChangeText = {(phone) => this.setState({phone})}
    value = {this.state.phone}
    autoCapitalize="none"
    keyboardType='numeric'
    returnKeyType={"next"}
    maxLength = {10}
    onSubmitEditing={(event) => this._password._root.focus()}
  />
</Item>

<Item floatingLabel>
  <Label>Password</Label>
  <Input
    getRef={(c) => this._password = c}
    onChangeText = {(password) => this.setState({password})}
    value={this.state.password}
    autoCapitalize="none"
    returnKeyType={"done"}
    secureTextEntry={this.state.hiddenPassword}
    onSubmitEditing = {this.handleLogin}
  />
</Item>

<TouchableOpacity>
  <Button style={styles.Button}
    onPress={this.handleLogin.bind(this)}>
    <Text style={styles.buttonText}>
      LOGIN
    </Text>
  </Button>
</TouchableOpacity>

答案 1 :(得分:1)

似乎这些返回类型不会这样做。之前也问过这个问题:

React Native: How to select the next TextInput after pressing the "next" keyboard button?

也许这对你有所帮助!

答案 2 :(得分:1)

这基本上是来自React Native的 TextInput 包装器,如果你想要做的是按下&#34; next&#34;按钮,转到另一个输入,您应该执行以下操作。

// <AuthField> render function
<Item>
    <Input
        value={value}
        onChangeText={onChangeText}
        placeholder={placeholder}
        autoCorrect={false}
        secureTextEntry={secureTextEntry}
        returnKeyType={returnKeyType}
        { ...this.props }
    />
</Item>

在您的组件中,您可以这样使用它:

// Other render
<Form style={styles.formStyle}>
    <AuthFieldInput
        placeholder="Username or Email"
        value={this.state.username}
        onChangeText={username => this.setState({username})}
        returnKeyType="next"
        onSubmitEditing={() => { 
            this.refs.passwowrd.focus(); 
        }}
    />
    <AuthFieldInput
        ref='password'
        placeholder="Password"
        value={this.state.password}
        onChangeText={password => this.setState({password})}
        secureTextEntry
        returnKeyType="go"
        />
</Form>

<强>更新 请查看有关此功能的文档https://facebook.github.io/react-native/docs/textinput.html#onsubmitediting