如何在 react/redux 项目中提交表单上的 Default()

Question

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

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);

我知道如何在 react 中执行此操作，但它的工作方式似乎不同，我不断收到一个没有任何意义的意外标记错误，可能是因为语法与 redux 和存储的工作方式不同。这也不是按钮问题，我在按回车键后提交表单。

Answer 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}>