如何在 react/redux 项目中的表单 onSubmit 上防止 Default()答案

【问题标题】：How to preventDefault() on form onSubmit in react/redux project如何在 react/redux 项目中的表单 onSubmit 上防止 Default()
【发布时间】：2019-08-15 07:45:34
【问题描述】：

我有一个带有输入的组件，在提交时用于将输入文本传递给存储。当我提交表单时，我不知道如何防止Default()。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { addItem } from '../actions';

const ItemInput = (props) => {
  return (
    <div>
      <form onSubmit={() => props.addItem('test')}>
        <input 
          placeholder="addItem"
        />
      </form>
    </div>
  );
}

const mapStateToProps = (state) => {
  return { addItem: state.addItem };
}

export default connect(mapStateToProps, {
  addItem: addItem
})(ItemInput);

我知道如何在反应中做到这一点，但它似乎并没有以同样的方式工作，我不断收到一个没有任何意义的意外令牌错误，可能是因为语法不一样redux 和 store 的方式。这也不是按钮问题，我是在按回车后提交表单。

【问题讨论】：

React - Preventing Form Submission的可能重复

标签： reactjs

【解决方案1】：

你这部分代码只是一个函数，你可以随意扩展：

<form onSubmit={() => props.addItem('test')}>

所以，你可以这样做：

<form onSubmit={e => {
  e.preventDefault();
  props.addItem('test');
}}>

或者将这个处理程序移动到一个函数中：

const handleSubmit = e => {
  e.preventDefault();
  props.addItem('test');
}

// ... 

<form onSubmit={handleSubmit}>

【讨论】：