I have a simple input in react that won't work with onSubmit but with onClick. Why is that? Here is the link to an example.

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=".1.0/react.min.js"></script>
<script src=".1.0/react-dom.min.js"></script>
<div id="root" />

I have a simple input in react that won't work with onSubmit but with onClick. Why is that? Here is the link to an example.

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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

• javascript
• reactjs

• please post the relevant code in the question – Chaim Friedman Commented Feb 13, 2018 at 0:53
• I have attached the link to a working example. – Siya Mzam Commented Feb 13, 2018 at 0:54

3 Answers 3

onSubmit is a prop for <form>, you should add the handler on to that element:

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

I think it needs to be in a <form></form> for submit to work

Because you're not submitting anything. onSubmit is for submitting forms...