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