Как предотвратить Default () в форме onSubmit в проекте реакции/редукции

У меня есть компонент с вводом, который при отправке предназначен для передачи входного текста в хранилище. Я не могу понять, как предотвратить 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);

Я знаю, как это сделать в реакции, но, похоже, это не работает так же, я продолжаю получать неожиданную ошибку токена, которая не имеет никакого смысла, вероятно, потому, что синтаксис просто не работает с редуксом. и хранить. Это также не проблема кнопки, я отправляю форму после нажатия кнопки возврата.

Возможный дубликат React — предотвращение отправки формы

Frondor 25.03.2019 06:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
3 203
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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}>

Другие вопросы по теме