e.preventDefault()阻止默认行为

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

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

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

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

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

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

import { PureComponent } from 'react';
import { connect } from "react-redux"
import * as action from "../../actions/newarticle"
import Error from "../../components/Error"
import { updateArticle } from '../../actions/article';


class ArticleEdit extends PureComponent {

    changeTitle =(e)=>{
        this.props.onChangeTitle("title",e.target.value)
    }
    changeDescription =(e)=>{
        this.props.onChangeDescription("description",e.target.value)
    }
    changeBody =(e)=>{
        this.props.onChangeBody("body",e.target.value)
    }
    changeTag =(e)=>{
        this.props.onChangeTag("tag",e.target.value)
    }
    watchEnter =(e)=>{
        if(e.keyCode === 13){
            e.preventDefault()
            this.props.addTag()
        }
    }
    removeTag =(tag) =>{
        return (ev) =>{
            this.props.removeTag(tag)
        }
    }
    onSubmit = (article) => {
        return()=>{
            this.props.updateArticle(article)
        }
    }
    render() {
        const {slug,title,description,body,tag,tags,errors } = this.props
        return (

            <div className='container page'>
            <div className='row'>
                <div className='col-md-6 offset-md-3 col-xs-12'>
                    <h1>编辑文章</h1>
                    <Error errors = {errors} />
                    <form>
                        <fieldset className='form-group'>
                            <input
                            
                                className='form-control form-control-lg'
                                type="text"
                                placeholder='文章标题'
                                value={title||''}
                                onChange={this.changeTitle}
                            />
                        </fieldset>
                        <fieldset className='form-group'>
                            <input
                                className='form-control form-control-lg'
                                type="text"
                                placeholder='文章描述'
                                value={description||''}
                                onChange={this.changeDescription}
                            />
                        </fieldset>
                        <fieldset className='form-group'>
                            <textarea
                                className='form-control form-control-lg'
                                rows='8'
                                placeholder='用markdown编辑文章'
                                value={body||''}
                                onChange={this.changeBody}
                            />
                        </fieldset>
                        <fieldset className='form-group'>
                            <input
                                className='form-control form-control-lg'
                                type="text"
                                placeholder='输入标签'
                                value={tag||''}
                                onChange={this.changeTag}
                                onKeyUp={this.watchEnter}
                            />
                            {
                                tags.map(tag=>{
                                    return(
                                        <span className='tag-default tag-pill'
                                        key={tag}
                                        >
                                            <i className='iconfont icon-denglong'
                                             onClick={this.removeTag(tag)}
                                            />
                                            
                                            {tag}
                                                
                                        </span>
                                    )
                                })
                            }
                        </fieldset>
                        <button
                            className='btn btn-lg btn-primary pull-xs-right'
                            type='button'
                            onClick={this.onSubmit({slug,title,description,body,tags})}
                        >
                            更新文章
                        </button>
                    </form>
                </div>
            </div>
        </div>
        )
    }
    componentWillUnmount(){
        this.props.articleUnload()
    }
}
const mapState = state => ({
    ...state.newarticleReducer
})
const mapDispatch = dispatch => ({
    onChangeTitle:(key,value)=>dispatch(action.articleFiledUpdate(key,value)),
    onChangeDescription:(key,value)=>dispatch(action.articleFiledUpdate(key,value)),
    onChangeBody:(key,value)=>dispatch(action.articleFiledUpdate(key,value)),
    onChangeTag:(key,value)=>dispatch(action.articleFiledUpdate(key,value)),
    addTag:()=>dispatch(action.articleAddTag()),
    removeTag:(tag)=>dispatch(action.articleRemoveTag(tag)),
    createArticle:article=>dispatch(action.createArticle(article)),
    articleUnload:()=>dispatch(action.articleUnload()),

    updateArticle:(article) =>dispatch(updateArticle(article))
    
})

export default connect(mapState, mapDispatch)(ArticleEdit)

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