2017-01-11 5 views
3

У меня есть форма редукции с кнопкой отправки и обычной кнопкой html. Я не хочу, чтобы форма была подтверждена при нажатии обычной кнопки. Но похоже, что форма всегда проверяется один раз, а затем, когда я снова нажимаю кнопку, выполняется onclick на кнопке. Как я могу это предотвратить?Редукционная форма всегда проверяется даже на обычной кнопке

Я воспроизвел ту же проблему с той же формой. Например, если вы перейдете на http://redux-form.com/6.4.3/examples/syncValidation/, введите 4 в поле возраста и нажмите на чистые значения. В первый раз проверка запускает и останавливает действие кнопки. Во второй раз действие кнопки действует, т.е. значения формы очищаются.

+0

Я не думаю, что кнопки являются проблемой. Насколько я вижу, они просто обычные кнопки html. Один имеет тип 'submit' другой' button'. Только первый должен запускать обработчик 'onSubmit' в форме. Я думаю, что вы видите, что проверка полей формы размывается, т. Е. Когда они теряют фокус. Это произойдет, если вы введете недопустимое значение и сразу же щелкните в другом месте на экране (например, кнопку «clear»). Это мгновенно подтвердит ввод, прежде чем действовать на событие кнопки. –

+0

Спасибо. Но, как вы можете видеть в примере в первом случае, «ясное» действие не выполняется. Я должен нажать кнопку очистки дважды, чтобы очистить форму. Как я могу предотвратить/обойти это? – Srini

+0

Я пробовал много раз, и большую часть времени мне приходилось только кликать, чтобы очистить его. Его иногда нужно было дважды щелкнуть, я посмотрю, смогу ли я узнать, в каких обстоятельствах. –

ответ

0

Пример, на который вы ссылаетесь, имеет такое поведение, потому что по умолчанию Redux Form вызывается функцией проверки для затронутых полей в событии размытия. Тот факт, что вы нажимаете кнопку, не имеет значения - вы можете щелкнуть по любому элементу или в любом месте на странице, и вы получите это поведение.

Единственный реальный способ остановить это поведение - прекратить использование формы Redux для ваших полей при размытии. Вы можете сделать это, установив touchOnBlur в false в конфигурационный объект Redux Form.

export default reduxForm({ form: 'myForm', touchOnBlur: false })(MyForm); 
+0

Спасибо за предложение. Однако это означает, что я потеряю подтверждение при размытии. Я согласен с тем, что проверка будет выполнена, но почему действие прекращается. Я должен нажать кнопку дважды, чтобы выполнить требуемое событие. Моя кнопка не является частью формы, вне ее формы, и когда я нажимаю ее, безответственно при любой ошибке в форме, она должна вызывать функцию onClick. – Srini