Как сохранить значение формы, установленное в коде

У меня есть веб-сайт, основанный на реакции, который по сути является пользовательским интерфейсом для аутентификации. Одной из наших форм является форма регистрации, в которую мы пытаемся добавить функциональность CAPTCHA. Теперь проблема в том, что мы должны использовать наши собственные процедуры CAPCHA, которые я не могу изменить (ну, не без горы перерисовок и недель задержек).

Таким образом, у меня есть сценарий, где у меня есть форма (мы используем Formik), и в форме мне нужно встроить скрытое текстовое поле и div, который использует JS нашей системы CAPTCHA, переопределяя 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>

1 ответ

Каким бы грубым это ни было, у вас есть идентификатор для ввода вашего претендента, поэтому в вашем обработчике изменений формы (или отправителе) используйте 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;
    });
}
Другие вопросы по тегам