Question

我有两个要在焦点和/或具有值时要设置动画的textInputs。

在任何有多个TextInputs并在焦点对准时分别设置样式的地方，我找不到示例。

在我当前的代码中，两个TextInput都得到关注。

你们如何处理？

class LoginForm extends React.Component {
    state = {
        username: '',
        password: '',
        isFocused: false,
    }

    isFocused = () => this.setState({isFocused: true});
    isBlur = () => this.setState({isFocused: false});

    render(){
        return(
            <KeyboardAvoidingView style={styles.LoginWrapper} behavior="padding">
                <View style={styles.LoginContainer}>
                    <Text style={styles.LoginTitle}>Sign In</Text>
                    <View style={styles.inputWrap}>
                        <Text style={styles.Label}>Username or Email {this.state.isFocused ? 'focused' : 'unfocused'}</Text>
                        <TextInput
                            returnKeyType="next"
                            onSubmitEditing={() => this.passwordInput.focus()}
                            keyboardType="email-address"
                            autoCapitalize="none"
                            autoCorrect={false}
                            onChangeText={(username) => this.setState({username})}
                            value={this.state.username}
                            onFocus={this.isFocused}
                            onBlur={this.isBlur}
                        />
                    </View>
                    <View style={styles.inputWrap}>
                        <Text style={styles.Label}>Password {this.state.isFocused ? 'focused' : 'unfocused'}</Text>
                        <TextInput
                            returnKeyType="go"
                            ref={(input) => this.passwordInput = input}
                            secureTextEntry
                            onChangeText={(password) => this.setState({password})}
                            value={this.state.password}
                            onFocus={this.isFocused}
                            onBlur={this.isBlur}
                        />
                    </View>
                    <TouchableOpacity>
                        <Text style={styles.ForgotPasswordText}>Forgot your password?</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.props.dispatch(loginRequest(this.state.username, this.state.password))}>
                        <Text style={styles.LoginText}>SIGN IN</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.signupButton}>
                        <Text style={styles.signupButtonText}>Sign Up</Text>
                    </TouchableOpacity>
                </View>
            </KeyboardAvoidingView>
        );
    }
}

Answer 1

这是修复它的一种方法：

class LoginForm extends React.Component {
    state = {
        username: '',
        password: '',
        FocusedElement: null,
    }

    onFocus = (FocusedElement) => this.setState({ FocusedElement })
    onBlur = () => this.setState({ FocusedElement: null })

    render(){
        return(
            <KeyboardAvoidingView style={styles.LoginWrapper} behavior="padding">
                <View style={styles.LoginContainer}>
                    <Text style={styles.LoginTitle}>Sign In</Text>
                    <View style={styles.inputWrap}>
                        <Text style={styles.Label}>Username or Email {this.state.FocusedElement === 'emailInput' ? 'focused' : 'unfocused'}</Text>
                        <TextInput
                            returnKeyType="next"
                            onSubmitEditing={() => this.passwordInput.focus()}
                            keyboardType="email-address"
                            autoCapitalize="none"
                            autoCorrect={false}
                            onChangeText={(username) => this.setState({username})}
                            value={this.state.username}
                            onFocus={() => this.onFocus('emailInput')}
                            onBlur={this.isBlur}
                        />
                    </View>
                    <View style={styles.inputWrap}>
                        <Text style={styles.Label}>Password {this.state.FocusedElement === 'passwordInput' ? 'focused' : 'unfocused'}</Text>
                        <TextInput
                            returnKeyType="go"
                            ref={(input) => this.passwordInput = input}
                            secureTextEntry
                            onChangeText={(password) => this.setState({password})}
                            value={this.state.password}
                            onFocus={() => this.onFocus('passwordInput')}
                            onBlur={this.isBlur}
                        />
                    </View>
                    <TouchableOpacity>
                        <Text style={styles.ForgotPasswordText}>Forgot your password?</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.props.dispatch(loginRequest(this.state.username, this.state.password))}>
                        <Text style={styles.LoginText}>SIGN IN</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.signupButton}>
                        <Text style={styles.signupButtonText}>Sign Up</Text>
                    </TouchableOpacity>
                </View>
            </KeyboardAvoidingView>
        );
    }
}

如何处理单独的输入焦点状态？

1 个答案: