React/Reduxでアクションをディスパッチする際にデフォルトを防ぐ良い方法はありますか？

Question

フォーム提出時に私の還元状態にテキストをプッシュするレデューサーを実行するアクションをディスパッチしています。私はVueでDOM内でpreventDefaultの権利があることを知っていますが、これを可能にするReactで何も見ていません。

フォームが送信されないようにするための最良の方法は、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を（実行している機能はここですアクション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> 
    ); 
    } 
} 

デフォルトのLinkInput;私はどうなるのか

Answer 1

は_onSubmitと呼ばれるコンポーネント内の関数を定義し、それがとても好きですしています：

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

してから、フォームのコンポーネントは、ちょうどそのonSubmitハンドラのthis._onSubmit

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

を使用しています

これはイベントを処理し、正しいアクションをディスパッチします。