React 中的 onClick 与 onSubmit [英] onClick vs onSubmit in React

问题描述

我在 react 中有一个简单的输入，它不适用于 onSubmit，但适用于 onClick.这是为什么?这是示例的链接.

const 样式 = {fontFamily: 'sans-serif',文本对齐:'居中'，};常量点击 = e =>{警报(嗨")}const App = () =>(<div style={styles}><input type='submit' value='click' onSubmit={clicked}/>

);ReactDOM.render(, 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"/>

解决方案

onSubmit 是

的道具，你应该将处理程序添加到该元素:

<输入.../></表单>

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.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" />

解决方案

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

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

这篇关于React 中的 onClick 与 onSubmit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！