0

我有一个基于反应的网站，它本质上是一个用户验证前端。我们的表格之一是注册表单，我们正在尝试在其上添加 CAPTCHA 功能。现在的问题是我们必须使用我们无法更改的内部 CAPCHA 例程（当然，如果没有大量繁文缛节和数周的延迟）。

所以我有一个场景，我有一个表单（我们使用 Formik），并且在表单中我必须嵌入一个隐藏的文本框和一个 div，我们的 CAPTCHA 系统的 JS 使用购买覆盖 div 并在隐藏的地方放置一些值然后用于稍后在流程中调用 API 的框。CAPTCHA JS 也将自己放入表单的 onSubmit 中。

无论如何，我的问题是隐藏字段是由 JS 例程设置的，因此反应的绑定机制没有涵盖。因此，如果我更改其中一个普通字段或提交表单，那么隐藏文本框的值将设置为“”——大概是因为它的值被设置回表单认为它应该是的值——我该如何避免这种情况？提交表单时，我需要访问普通字段和此隐藏字段。

一些示例代码可能会使它更清晰：

render() {
    const { apiError } = this.props;

    return (
        <div>
            <Formik
                initialValues={{
                    firstName: '',
                    lastName: '',
                    email: '',
                    password: '',
                    confirmPassword: '',
                    newsletter: false,
                    legal: false
                }}
                validate={this.validate}
                onSubmit={this.handleSubmit}
            >
                {({
                    errors,
                    touched,
                    values,
                    isSubmitting,
                    handleSubmit,
                    setStatus,
                    status = { submitedWithEmptyInputs: false, submited: false },
                }) => (
                    <div>
                        <div>
                            {apiError &&
                                status.submited &&
                                apiError === 409 && (
                                    <GenericError>Email address exists</GenericError>
                                )}
                            {apiError &&
                                status.submited &&
                                apiError !== 409 && (
                                    <GenericError>
                                        Sorry we couldn't process your request. Please check all
                                        inputs.
                                    </GenericError>
                                )}
                        </div>
                        <Form onSubmit={handleSubmit} noValidate>
                            <InputField
                                label="First Name"
                                type="text"
                                id="firstName"
                                name="firstName"
                                value={values.firstName}
                                error={values.firstName && errors.firstName}
                            >
                                {status.submitedWithEmptyInputs &&
                                    errors.firstName && (
                                        <ErrorMessage className="error">
                                            {errors.firstName}
                                        </ErrorMessage>
                                    )}
                                {status.submitedWithEmptyInputs &&
                                    errors.firstName && (
                                        <ErrorIcon className="error">
                                            <Icon icon={ICONS.ERROR} size="20px" />
                                        </ErrorIcon>
                                    )}
                            </InputField>
                            ....
                            ....


                            <div id="challenger" />
                            <input type="hidden" name="cid" id="cid" value="" />


                                <Button
                                    text="Create your ID"
                                    primary
                                    width="100%"
                                    type="submit"
                                    id="submit"
                                    loading={this.props.registering}
                                    disabled={isSubmitting}
                                    onClick={() => {
                                        if (
                                            !values.firstName ||
                                            !values.lastName ||
                                            !values.email ||
                                            !values.password ||
                                            !values.confirmPassword ||
                                            !values.legal
                                        ) {
                                            setStatus({ submitedWithEmptyInputs: true });
                                        }
                                    }}
                                />
                            </FormActions>
                        </Form>
4

1 回答 1

1

尽管这可能很粗糙，但您有一个挑战者输入的 id，因此在您的表单更改处理程序（或提交者）中，使用 vanilla javascript 获取并存储其值，然后将其设置回来。例如

onChange(event) { 
    let challengeValue = document.getElementById('cid').value;
    // do some change handling stuff which includes a setState probably, right?
    this.setState({ someKey: someValue }, () => {
        //This is the callback for setState, lets apply the value back to cid
        document.getElementById('cid').value = challengeValue;
    });
}
于 2018-03-15T18:00:06.190 回答