Question

我正在调度一个动作，该动作运行一个reducer，在表单提交时将一些文本推送到我的redux状态。我知道在Vue你可以在DOM中preventDefault，但我没有在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;

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

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

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

1 个答案: