javascript - 在 React/Redux 中调度一个 Action 时，有没有一种好的方法来防止默认？

Question

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

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

Action /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 Action 的地方)

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；

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

这将处理事件并发送正确的操作。