• e.preventDefault()阻止默认行为


    通常情况下,当你希望阻止某个事件的默认行为时,可以使用e.preventDefault()。以下是一些常见的应用场景:

    1. 表单提交:在处理表单提交事件时,通过调用e.preventDefault()可以阻止表单的默认提交行为,这样你就可以在提交之前执行其他操作或验证表单数据

    2. 链接点击:通过在链接的点击事件处理程序中调用e.preventDefault(),可以阻止链接的默认跳转行为,从而允许你在点击链接时执行自定义操作,比如打开一个模态框或执行一些其他逻辑。

    3. 按钮点击:在处理按钮点击事件时,有时你可能希望阻止按钮的默认提交行为或页面刷新行为。通过调用e.preventDefault()可以阻止这些默认行为。

    4. 键盘事件:在处理键盘事件时,你可能希望阻止某些按键的默认行为。例如,你可以在按下回车键时阻止表单的默认提交行为,或者在按下空格键时阻止滚动页面的默认行为。

    总的来说,当你需要在事件发生时执行自定义逻辑并阻止默认行为时,可以使用e.preventDefault()

    1. import { PureComponent } from 'react';
    2. import { connect } from "react-redux"
    3. import * as action from "../../actions/newarticle"
    4. import Error from "../../components/Error"
    5. import { updateArticle } from '../../actions/article';
    6. class ArticleEdit extends PureComponent {
    7. changeTitle =(e)=>{
    8. this.props.onChangeTitle("title",e.target.value)
    9. }
    10. changeDescription =(e)=>{
    11. this.props.onChangeDescription("description",e.target.value)
    12. }
    13. changeBody =(e)=>{
    14. this.props.onChangeBody("body",e.target.value)
    15. }
    16. changeTag =(e)=>{
    17. this.props.onChangeTag("tag",e.target.value)
    18. }
    19. watchEnter =(e)=>{
    20. if(e.keyCode === 13){
    21. e.preventDefault()
    22. this.props.addTag()
    23. }
    24. }
    25. removeTag =(tag) =>{
    26. return (ev) =>{
    27. this.props.removeTag(tag)
    28. }
    29. }
    30. onSubmit = (article) => {
    31. return()=>{
    32. this.props.updateArticle(article)
    33. }
    34. }
    35. render() {
    36. const {slug,title,description,body,tag,tags,errors } = this.props
    37. return (
    38. <div className='container page'>
    39. <div className='row'>
    40. <div className='col-md-6 offset-md-3 col-xs-12'>
    41. <h1>编辑文章h1>
    42. <Error errors = {errors} />
    43. <form>
    44. <fieldset className='form-group'>
    45. <input
    46. className='form-control form-control-lg'
    47. type="text"
    48. placeholder='文章标题'
    49. value={title||''}
    50. onChange={this.changeTitle}
    51. />
    52. fieldset>
    53. <fieldset className='form-group'>
    54. <input
    55. className='form-control form-control-lg'
    56. type="text"
    57. placeholder='文章描述'
    58. value={description||''}
    59. onChange={this.changeDescription}
    60. />
    61. fieldset>
    62. <fieldset className='form-group'>
    63. <textarea
    64. className='form-control form-control-lg'
    65. rows='8'
    66. placeholder='用markdown编辑文章'
    67. value={body||''}
    68. onChange={this.changeBody}
    69. />
    70. fieldset>
    71. <fieldset className='form-group'>
    72. <input
    73. className='form-control form-control-lg'
    74. type="text"
    75. placeholder='输入标签'
    76. value={tag||''}
    77. onChange={this.changeTag}
    78. onKeyUp={this.watchEnter}
    79. />
    80. {
    81. tags.map(tag=>{
    82. return(
    83. <span className='tag-default tag-pill'
    84. key={tag}
    85. >
    86. <i className='iconfont icon-denglong'
    87. onClick={this.removeTag(tag)}
    88. />
    89. {tag}
    90. span>
    91. )
    92. })
    93. }
    94. fieldset>
    95. <button
    96. className='btn btn-lg btn-primary pull-xs-right'
    97. type='button'
    98. onClick={this.onSubmit({slug,title,description,body,tags})}
    99. >
    100. 更新文章
    101. button>
    102. form>
    103. div>
    104. div>
    105. div>
    106. )
    107. }
    108. componentWillUnmount(){
    109. this.props.articleUnload()
    110. }
    111. }
    112. const mapState = state => ({
    113. ...state.newarticleReducer
    114. })
    115. const mapDispatch = dispatch => ({
    116. onChangeTitle:(key,value)=>dispatch(action.articleFiledUpdate(key,value)),
    117. onChangeDescription:(key,value)=>dispatch(action.articleFiledUpdate(key,value)),
    118. onChangeBody:(key,value)=>dispatch(action.articleFiledUpdate(key,value)),
    119. onChangeTag:(key,value)=>dispatch(action.articleFiledUpdate(key,value)),
    120. addTag:()=>dispatch(action.articleAddTag()),
    121. removeTag:(tag)=>dispatch(action.articleRemoveTag(tag)),
    122. createArticle:article=>dispatch(action.createArticle(article)),
    123. articleUnload:()=>dispatch(action.articleUnload()),
    124. updateArticle:(article) =>dispatch(updateArticle(article))
    125. })
    126. export default connect(mapState, mapDispatch)(ArticleEdit)

    这里阻止默认行为的目的是为了在输入标签时,当用户按下回车键时不触发表单的提交行为。通常,按下回车键会导致表单提交,但在这种情况下,我们希望回车键只用于添加标签,而不是提交整个表单。因此,通过在输入框的onKeyUp事件中检查keyCode是否为13(回车键的keyCode为13),如果是,则使用preventDefault()方法阻止默认行为,即阻止表单提交。

  • 相关阅读:
    ch4-1时域到频域(短时分析)
    postgresql之integerset
    猿创征文| Linux——基础I/O3| 缓冲区|自己设计缓冲区实现文件操作|minishell重定向
    shadow bias之为啥有acne
    物联网技术应用属于什么专业分类
    基于遗传算法的柔性车间调度优化(Matlab代码实现)
    Python 中的省略号对象
    【单调栈】下一个更大元素 III
    微信小程序|步骤条
    Cholesterol-PEG-Azide CLS-PEG-N3 胆固醇-聚乙二醇-叠氮 MW:3400
  • 原文地址:https://blog.csdn.net/czlj1998/article/details/133273750