Question

我在我的React Native项目中使用了redux-form。我尝试通过在提交失败后执行以下操作，在表单中添加一些简单的可用性增强功能：

重置输入字段，使其“空白”
关注表单中的第一个输入字段，这样用户就不必手动点击它。在这种情况下，它是用户名输入字段。

我有这个主要工作。问题是，在我重置表单并手动在用户名输入字段上focus()后，它会触发触摸+错误状态，从而显示需要密码字段。我认为重置表单可以解决这个问题，但事实并非如此。

用户提交表单后，将调用以下生命周期事件：

componentWillReceiveProps(nextProps) {
        if ( nextProps.network.failed_login && this.state.submitted ) {

            this.setState({ submitted: false })

            nextProps.resetLoginForm();

            // this._usernameInput._root.focus();
        }
    }

nextProps.resetLoginForm()实际上是这样的：

function mapDispatchToProps(dispatch) {
    return {
        resetLoginForm() {
            dispatch(reset("login"))
        },
        loginUser: (username, password) => dispatch(loginUser(username, password))  
    }
}

这是Field道具中每个component调用的内容：

renderInput = ({ input, label, type, meta: { touched, error, warning, value } }) => {
        let textInput = null;

        return (
          <View>
            <Item error={error && touched} style={styles.inputGrp}> 
              <Icon
                active
                name={
                  input.name === "username" ? "person" : "ios-unlock-outline"
                }
                style={{ color: commonColor.contentTextColor }}
              />
              <Input
                ref={c => { textInput = c; if ( input.name === "username" ) this._usernameInput = c; } }
                placeholderTextColor={commonColor.lightTextColor}
                style={{ color: commonColor.contentTextColor }}
                placeholder={input.name === "username" ? "Username" : "Password"}
                secureTextEntry={input.name === "password" ? true : false}
                autoFocus={ input.name === "username" ? true : false }
                {...input}
              />
              {touched && error
                 ? <Icon
                     active
                     style={styles.formErrorIcon}
                     onPress={() => textInput._root.clear()}
                     name="close"
                   />
                 : <Text />}
                {touched && error
                ? <Text style={styles.formErrorText1}>
                    {error}
                  </Text>
                : <Text style={styles.formErrorText2}>error here</Text>}
            </Item>

          </View>
        );
    }

最后是render方法：

render() {
        const { handleSubmit, reset } = this.props;

        const loginError = this.props.network.failed_login ? (
            <Text>Invalid username/password</Text>
        ) : null;

        const submitMarkup = this.state.submitted ? (
            <Spinner color="#663399" />
        ) : (
            <Button
                block
                style={styles.loginBtn}
                onPress={handleSubmit(this.onSubmit.bind(this))}
            >
                <Text style={{ lineHeight: 16, fontWeight: "bold" }}>
                    Login
                </Text>
            </Button>
        )

        return (
            <View>
                <Modal isVisible={this.props.isVisible}>
                    <View style={styles.backgroundContainer}>
                        <View style={styles.formContainerView}>
                            <View style={styles.formView}>
                                <Field
                                    name="username"
                                    component={this.renderInput}
                                    type="username"
                                    validate={[alphaNumeric, required]}
                                />
                                 <Field
                                    name="password"
                                    component={this.renderInput}
                                    type="password"
                                    validate={[alphaNumeric, required]}
                                />

                                {submitMarkup}

                                {loginError}

                            </View>
                        </View>
                    </View>
                </Modal>
            </View>
        );
    }

autoFocus在最初呈现表单时起作用，但在提交操作之后不起作用。

确保我可以清除表单，关注第一个输入字段以及确保为空输入触发零错误的最佳方法是什么，因为我的验证要求密码输入为非空？

Answer 1

Redux Forms 不注册引用，应该由用户完成

因此，这是focus TextInput的唯一途径。如果您的resetAction 重新呈现表单，则可以使用TextInput中的autoFocus。

您可以使用touched来显示错误。 默认情况下，当字段模糊时，将设置此项。

重置表单并关注第一个输入字段

1 个答案: