Question

我有一个带有输入的组件，该组件在提交时旨在将输入文本传递给存储。提交表单时，我不知道如何防止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和存储的方式。这也不是按钮问题，我要在按回车键后提交表单。

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

如何在react / redux项目中的onSubmit表单上防止Default（）

1 个答案: