<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var FormComponent = React.createClass({
getInitialState:function(){
return {result:'123'}
},
handleChange:function(event){
console.log(event.target.value);
this.setState({result:event.target.value});
},
handleSubmit:function(event){
event.preventDefault();
console.log(this.state.result);
},
render:function(){
return <form onSubmit={this.handleSubmit}>
<input type="text"
onChange={this.handleChange}
value={this.state.result}/>
<input type="submit" value='提交'/>
</form>
}
})
ReactDOM.render(
<FormComponent/>,
document.getElementById('example')
)
</script>
</body>
</html>
React 表单控件onSubmit
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:React 表单受控组件
下一篇:React onWheel
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
前端项目实战壹佰玖拾柒react-admin+material ui-react-admin之onSubmit
前端
react.js 前端 ui ide -
form表单中的onSubmit
只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。 在提交表单前,一般都会进行数据验证,可以选择在submit按钮上的onclick中验证,也可以在on ...
提交表单 用户名 函数返回 php javascript