Тип ввода кнопки submit не отправляется в React с React Router

Я добавил контекстную причину React.js ссылки NavLink (из React Router) в кнопку, которую пытаюсь использовать. В любом случае, когда я хочу отправить данные с помощью:

submitData(event) {
    event.preventDefault();
    alert("Submitted");
}

Это будет работать:

<FormGroup>
  <input type = "submit" />
</FormGroup>

Но этого не будет:

<FormGroup>
    <Button type = "submit" id = "submitButton" color = "primary"><NavLink to = "/Confirm">Submit</NavLink></Button>
</FormGroup>

Не уверен, почему второй не работает, но это мой предпочтительный метод. Есть идеи или мысли о том, почему? Я знаю, что <button> новее, но добавление type = "input" должно заставить его работать.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
1 291
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Компонент NavLink уже прослушивает собственное событие отправки / нажатия, которое не распространяется на onSubmit вашей собственной формы.

Простое решение - просто привязать onClick NavLink к вашему собственному обработчику:

<FormGroup>
    <Button type = "submit" id = "submitButton" color = "primary">
        <NavLink to = "/Confirm" onClick = {this.submitData.bind(this)}>Submit</NavLink>
    </Button>
</FormGroup>

спасибо, но это не позволяет <NavLink> перенаправить впоследствии. Почти как если форма отправляется, она просто останавливается, а затем не перенаправляет на страницу подтверждения.

Mark 15.03.2018 05:21

Удалите event.preventDefault().

Charles Crete 15.03.2018 05:30

Другие вопросы по теме