javascript - 使用功能组件和组件输入在 React Native 中的 Next Input
问题描述
我尝试实现下一个输入,用户单击输入以做出本机反应,但我不知道我能做什么
我在我的组件文件中创建了一个组件输入:
class Input extends React.Component {
constructor() {
super();
this.state = {
hidePassword: true
}
}
setPasswordVisibility = () => {
this.setState({ hidePassword: !this.state.hidePassword })
}
render() {
return (
<>
<TextInput
placeholder={this.props.placeholder ? this.props.placeholder : ''}
selectionColor='#BA90B7'
keyboardType={this.props.keyboard ? this.props.keyboard : 'default'}
maxLength={this.props.maxLen ? this.props.maxLen : 100}
style={[styles.input,
{
width: this.props.width ? this.props.width : 244,
marginLeft: this.props.marginL ? this.props.marginL : 0,
marginTop: this.props.marginT ? this.props.marginT : 0,
textAlign: this.props.alignText ? this.props.alignText : 'left',
fontSize: this.props.fontSize ? this.props.fontSize : 15,
}]}
autoFocus={this.props.focus ? this.props.focus : false}
secureTextEntry={this.props.type == 'security' ? this.state.hidePassword : false}
/>
<Feather style={[styles.eye,
{
marginTop: this.props.marginT ? this.props.marginT : 0,
}]}
name={(this.state.hidePassword) ? 'eye' : 'eye-off'}
size={this.props.eye ? 24 : 0}
color="#BA90B7"
onPress={this.setPasswordVisibility}
/>
</>
);
}}
在我的文件中,我第三次调用这个组件:
export default function RegisterStep1({ navigation }) {
return (
<View style={styles.container}>
<Back navi={() => navigation.navigate('Login')} />
<Text style={styles.txtNome}>
Seu nome:
</Text>
<Input
placeholder="nome"
width={141}
focus={true}
maxLen={50}
/>
<Input
placeholder="Sobrenome"
width={141} marginL={164}
maxLen={50}
/>
<Text style={styles.txtChoiceUser}>
Escolha seu
</Text>
<Text style={styles.txtUser}>
usuário:
</Text>
<Input
placeholder="Usuário"
width={312}
marginT={200}
maxLen={30}
/>
<Button text="Próximo" marginT={250} navi={() => navigation.navigate('RegisterStep2')} />
<Text style={styles.infoUser}>
Não mostraremos seu usuário dentro do aplicativo, ele séra usado somente para logar na plataforma.
</Text>
</View>
但是我不能在组件输入中调用“onSubmitEditing”,并且没有想到在我的组件中解决这个问题的方法。
存在某种形式吗?
解决方案
我在我的组件中使用它解决了这个问题:
<Input
placeholder="nome"
inputName="nome"
width={141}
focus={true}
onSubmitEditing={(event) => {
this.sobrenomeInput.focus()
}}
maxLen={50}
/>
<Input
placeholder="Sobrenome"
inputName="sobrenome"
width={141} marginL={164}
maxLen={50}
inputRef={(input) => {
this.sobrenomeInput = input
}}
onSubmitEditing={(event) => {
this.sobrenomeInput.focus()
}}
/>
这在我的逻辑组件中:
{...this.props}
ref={(input) => this.props.inputRef && this.props.inputRef(input)}
现在在这里它在两个第一个输入中工作,但在我的第三个输入中它不起作用,我仍在尝试解决这个问题
推荐阅读
- mysql - 如何在 laravel 中获取用户的类型?
- wordpress - 图标在 WordPress 的“添加新帖子”页面中不起作用
- c++ - 为动态分配的整数赋值
- python - 通过终端使用 import os 命令会出错
- python - 从pytorch中的张量选择性替换向量的有效方法
- python - 解析字典的 JSON 列表
- yii2 - 使用 Yii2 ActiveRecord 在 SELECT 中带有大小写的子查询
- arrays - Angular - 如何根据选择中的选项更改从 JSONA 下载的数据
- javascript - 如何在对象中合并对象的属性
- angular - ./node_modules/@syncfusion/ej2-angular-richtexteditor/@syncfusion/ej2-angular-richtexteditor.es5.js 在构建角度应用程序期间出错