React 表单控件onSubmit
React 控件 表单
2023-09-11 14:17:23 时间
<!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 Testing] Test your Custom Hook Module with react-hooks-testing-library
- [React Intl] Use a react-intl Higher Order Component to format messages
- [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- react redux 相关技术
- [React] Tree Shake Your React Application Modules
- [React] useCallback + useMemo to avoid re-render
- [React] Extend styles with styled-components in React
- [React] Capture values using the lifecycle hook getSnapshotBeforeUpdate in React 16.3
- [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- [React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage
- [React] Higher Order Components (replaces Mixins)
- [React Testing] Redux Reducers
- reactjs react-redux的基本使用
- SAP UI5 Web Component的React表格控件用法
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了
- React(一)react概述、组件、事件
- react源码分析:深度理解React.Context