在 React/Redux 中分派操作时有没有好的方法来防止默认情况？

我正在调度一个操作，该操作运行一个减速器，在表单提交时将一些文本推送到我的 redux 状态。我知道在 Vue 中你可以preventDefault就在 DOM 中，但我在 React 中没有看到任何东西可以让这看起来成为可能。

我想知道阻止表单提交的最佳方法，以便 Redux 可以做到这一点。我的代码如下。谢谢！

动作/index.js

export function addLink(text) {
    return {
        type: 'ADD_LINK',
        text
    }
}

reducers/index.js (ADD_LINK) 是我正在运行的函数

/*eslint-disable*/
export function linkList(state = [], action) {
    switch(action.type) {
        case 'ADD_LINK': 
            var text = action.text;
            console.log('Adding link');
            console.log(text);
            return {
                ...state,
                links: [text, ...state.links]
            };
        case 'DELETE_LINK':
            var index = action.index;
            console.log('Deleting link');
            return {
                ...state,
                links: [
                    ...state.links.slice(0, index),
                    ...state.links.slice(index + 1)
                ],
            };
        case 'UPDATE_LINK':
            var index = action.index;
            var newText = action.newText;
            console.log(action.newText);
            console.log(action.index);
            return {
                ...state,
                links: [ 
                    ...state.links.slice(0, index),
                    newText,
                    ...state.links.slice(index + 1)
                ],
            }
        default: 
            return state;
    }
};

export default linkList;

Components/LinkInput.js（这是我调度 onSubmit 操作的位置）

import React, { Component } from 'react';

class LinkInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
        text: '',
    };
  }
  handleChange(e) {
    e.preventDefault();
    this.setState({
        text: e.target.value
    });
  }
  render() {
    return (
        <form className="form form-inline" onSubmit={this.props.data.addLink.bind(null, this.state.text)} style={styles.form}>
          <div className="form-group">
            <label className="label" htmlFor="exampleInputName2" style={styles.label}>Add a link: </label>
            <input type="text" className="input form-control" onChange={this.handleChange.bind(this)} style={styles.input}/>
          </div>
          <button type="submit" className="button btn btn-primary" style={styles.button}>Add link</button>
        </form>
    );
  }
}

导出默认的 LinkInput；

我要做的就是在您的组件中定义一个名为的函数_onSubmit并让它像这样：

_onSubmit(e) {
  e.preventDefault();
  this.props.data.addLink(this.state.text)
}

然后你的表单组件只使用this._onSubmit为其onSubmit处理程序

<form className="form form-inline" onSubmit={this._onSubmit} style={styles.form}>

这将处理该事件并调度正确的操作。