Redux窗體：如何處理多個按鈕？

我想添加第二個提交按鈕到redux-form。Redux窗體：如何處理多個按鈕？

兩個按鈕都應調度保存數據的操作，但根據按下按鈕，用戶應該路由到不同的頁面。

所以我定義了一個處理程序，我把onSubmit prop傳遞給窗體。

但據我看到的只是形式數據傳遞給該處理程序：

該文檔上handleSubmit注：

意味着要傳遞的一種功能<form onSubmit={handleSubmit}> 或<button onClick={handleSubmit}>。它將運行同步和異步驗證，如果表單有效，它將調用this.props.onSubmit(data)表單數據的內容。

我缺少的是一種將按鈕按下的信息（例如點擊事件）傳遞給我的onSubmit處理程序的方法，這樣我就可以按照預期保存和路由。

來源

2016-05-11 arie

有很多方法可以做到這一點，但它們都涉及附加按鈕數據，具體取決於按下哪個按鈕。這是一個內聯版本。

class Morpheus extends Component { 
    render() { 
    const { handleSubmit } = this.props; 
    return (
     <div> 
     Fields go here 
     <button onClick={handleSubmit(values => 
      this.props.onSubmit({ 
      ...values, 
      pill: 'blue' 
      }))}>Blue Pill</button> 
     <button onClick={handleSubmit(values => 
      this.props.onSubmit({ 
      ...values, 
      pill: 'red' 
      }))}>Red Pill</button> 
     </div> 
    ); 
    } 
} 

export default reduxForm({ 
    form: 'morpheus' 
})(Morpheus)

的handleSubmit處理所有的驗證檢查和諸如此類的東西，如果一切是有效的，它會調用給它與表單值的功能。所以我們給它一個附加額外信息的函數並且調用onSubmit()。

來源

2016-05-11 21:47:23

非常感謝！對於不同的道具和處理程序之間的相互作用，我有點困惑，但是你的解決方案是完全合理的。 – arie

嘿艾瑞克，首先感謝'redux-form' :)。其次，它確實有效，但感覺有點像一個隱藏的價值領域。例如，我工作在一個通用表單上，也許有人會使用一個名爲'pill'的屬性。我真的想以某種方式綁定該函數，並將其作爲另一個參數傳遞。 – leonprou

不幸的是，因爲

@mibbit onSubmit是您定義的函數（至少這是文檔所說的：look the onSubmit method）。這是用於Redux-form 7.x的以下示例@Erik R.

class Morpheus extends Component { 
    constructor(props) { 
     super(props); 

     this.state = {}; 
     this.onSubmit = this.onSubmit.bind(this); 
    } 

    onSubmit(values, pill) { 
     // do magic here 
    } 

    render() { 
     const { 
      handleSubmit 
     } = this.props; 
     return (< 
      div > 
      Fields go here < 
      button onClick = { 
       handleSubmit(values => 
        this.onSubmit({ 
         values, 
         pill: 'blue' 
        })) 
      } > Blue Pill < /button> < 
      button onClick = { 
       handleSubmit(values => 
        this.onSubmit({ 
         values, 
         pill: 'red' 
        })) 
      } > Red Pill < /button> < 
      /div> 
     ); 
    } 
} 

export default reduxForm({ 
    form: 'morpheus' 
})(Morpheus)

來源

2017-11-05 05:00:11

Redux窗體：如何處理多個按鈕？

回答

相關問題