首页 文章

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

提问于
浏览
2

我正在调度一个运行一个reducer的动作,它在表单提交时将一些文本推送到我的redux状态 . 我知道在Vue中你可以直接在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>
    );
  }
}

export default LinkInput;

1 回答

  • 5

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

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

相关问题