React Native 中的 Next Input 使用功能组件和组件 Input

Question

我尝试实现下一个输入，用户点击输入以响应本机，但我不知道我能做什么

我在我的组件文件中创建了一个组件输入：

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>

但是我无法在组件 Input 中调用“onSubmitEditing”，也没有想过在我的组件中解决这个问题的方法。

存在某种形式吗？

Answer 1

我在我的组件中使用这个解决了这个问题：

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

现在它在两个第一个输入中工作，但在我的第三个输入中它不起作用，我仍在努力解决这个问题

Answer 2

我解决了这个问题，在函数调用中更改名称，为另一个参数 'this'，保持类似：

<Input
            placeholder="nome"
            inputName="nome"
            width={141}
            focus={true}
            maxLen={50}
            onSubmitEditing={(event) => {
                this.sobrenomeInput.focus()
            }}
        />
        <Input
            placeholder="Sobrenome"
            inputName="sobrenome"
            width={141} marginL={164}
            maxLen={50}
            inputRef={(input) => {
                this.sobrenomeInput = input
            }}
            onSubmitEditing={(event) => {
                this.UserInput.focus()
            }}
        />

        <Input
            placeholder="Usuário"
            width={312}
            marginT={200}
            maxLen={30}
            inputRef={(input) => {
                this.UserInput = input
            }}
        />

这样看起来可以工作一段时间 ;)

React Native 中的 Next Input 使用功能组件和组件 Input

Next Input in React Native using functional component and component Input

javascript

components

reactjs

react-native

react-native-android