Large react-redux form app

我一直在使用react重寫我公司的模塊之一，模塊是由4-5種不同形式組成的單一頁面組合，然後在每種形式中進行選擇，然後確定出現的順序下一步表單步驟。Large react-redux form app

有很多「靜態」輸入字段不影響應用程序的視覺UI狀態，但需要發送到服務器，其他輸入正在改變UI狀態。

我正在尋找這種類型的應用程序的正確方法，因爲它似乎附加onChange事件到每個單一的輸入（總共有超過100輸入在整個頁面）。 我已經使用了react-redux-forms插件，但它對我來說太過分了，因爲我需要直接訪問狀態並根據它進行決策。我會優先考慮對國家的更多控制權。

爲每個輸入綁定onChange事件是否正確的解決方案？或者有更好的方法。

來源

2016-07-07 Dima Grossman

可能值得考慮將表單分成更小的塊並且有一種類似嚮導的方法。也許可以看看最新版本與我們描述的確切問題有很多改進的redux形式的庫。 – Deep

我已經將整個表單分成了小部分塊，我的問題更多地是關於如何通知每個可用輸入域的變化狀態。我會再看看react-redux-forms –

我們用redux-form很容易做到這一點。因爲一切都在fields道具維護，你可以做這樣的事情：

const Form = ({ 
    fields, 
    handleSubmit, 
    saveForm 
}) => (
    <form onSubmit={handleSubmit(saveForm)}> 
    <fieldset> 
     <input type="text" {...fields.hasAlternativeDelivery} /> 
    </fieldset> 
    {fields.hasAlternativeDelivery.value === true && 
     <fieldset> 
     {/* more fields go here */} 
     </fieldset> 
    } 
    </form> 
);

然後，我們有條件地驗證某些字段集like this。因此，要回答你的問題：你不應該依賴變化事件來隱藏/顯示某些領域，這與React的本質相違背（React是聲明性的，你所描述的是一個必要的做事方式）。相反，找出哪些狀態（/道具）應導致哪個用戶界面。

來源

2016-07-07 08:17:44 Steven

Large react-redux form app

回答

相關問題