在React/Redux中调度动作时，有没有一种很好的方法可以防止默认？

我正在调度一个运行reducer的操作，该操作将表单提交中的某些文本推送到我的redux状态。我知道在Vue中，你可以在DOM中使用preventDefault，但是我还没有看到React中的任何东西可以让这看起来成为可能。在React/Redux中调度动作时，有没有一种很好的方法可以防止默认？

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

动作/ index.js

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

减速器/ 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;

组件/ LinkInput.js（这里是我派遣action on提交）

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;

来源

2016-11-29 maxwellgover

你这样做的方式是正确的。 –

在onSubmit上使用你自己的处理程序，并在e.preventDefault（）之后调用addLink。 –

什么，我会做的是定义你叫_onSubmit组件的功能，并把它做到像这样：其onSubmit处理

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

，然后你的表单组件只是使用this._onSubmit

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

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

来源

2016-11-29 22:46:17 finalfreq

非常感谢。从现在开始我会记住这一点！ – maxwellgover

在React/Redux中调度动作时，有没有一种很好的方法可以防止默认？

回答

相关问题