Question

我有一个基于反应的网站，它本质上是一个用户验证前端。我们的表格之一是注册表单，我们正在尝试添加CAPTCHA功能。现在的问题是我们必须使用我自己内部的CAPCHA例程，这是我无法改变的（好吧，没有一座红塔和几周的延误）。

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

无论如何，我的问题是隐藏字段是由JS例程设置的，因此不会被react的绑定机制所覆盖。因此，如果我更改其中一个正常字段或提交表单，则隐藏文本框值设置为“” - 可能是因为它的值被设置回形式认为它应该是什么 - 我怎么能避免这种情况？提交表单时，我需要访问普通字段和隐藏字段。

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

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>

Answer 1

这可能是粗略的，你有一个你的挑战者输入的id，所以在你的表单更改处理程序（或提交者）中使用vanilla javascript来获取并存储其值，然后将其设置回来。 e.g。

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

如何保留在代码中设置的表单值的值

1 个答案: