在 React/Redux 中调度操作时，有没有一种防止默认的好方法？答案

【问题标题】：Is there a good way to preventDefault when dispatching an action in React/Redux?在 React/Redux 中调度操作时，有没有一种防止默认的好方法？
【发布时间】：2017-04-14 02:44:23
【问题描述】：

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

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

actions/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>
    );
  }
}

导出默认链接输入；

【问题讨论】：

你做的就是正确的方法。
在 onSubmit 上使用您自己的处理程序，并在 e.preventDefault() 之后对该处理程序调用 addLink。

标签： javascript reactjs redux

【解决方案1】：

我要做的是在您的组件中定义一个名为 _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}>

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

【讨论】：