我正在使用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>
谢谢!
答案 0 :(得分:3)
我遇到错误,因为“ _this2.refs.password.focus”不是TextInput的onSubmitEditing上的函数。
这是我固定的方法:
<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