Блог

Главная - Вопросы по программированию - onClick против onSubmit в React

onClick против onSubmit в React

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть простой ввод в react, который будет работать не с onSubmit , а с onClick . Почему это так? Вот ссылка на пример.

 const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

const clicked = e => {
  alert("Hi")
}
const App = () => (
  <div style={styles}>
    <input type='submit' value='click' onSubmit={clicked}/>
  </div>
);

ReactDOM.render(<App />, document.getElementById('root')); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

Комментарии:

1. пожалуйста, отправьте соответствующий код в вопросе

2. Я прикрепил ссылку на рабочий пример.

Ответ №1:

onSubmit это реквизит для <form> , вы должны добавить обработчик к этому элементу:

 <form onSubmit={onSubmit}>
  <input ... />
</form>

Комментарии:

1. О да, да, да, вы правы. Но почему react позволяет мне использовать этот обработчик, не предупреждая меня или что-то в этом роде?

2. Из MDN: событие отправки срабатывает при отправке <form> . Обратите внимание, что событие отправки срабатывает на самом элементе <form>, а не на любом <button> или <input type=»submit»> внутри него. (Отправляются формы, а не кнопки.).

Ответ №2:

Я думаю, что это должно быть в <form></form> для отправки на работу

Комментарии:

1. Да, безусловно. Спасибо. Пожалуйста, прочтите мой комментарий к другому ответу.

Ответ №3:

Потому что вы ничего не отправляете. onSubmit предназначен для отправки форм…