表單驗證反應

我在想如何處理表單驗證。目前，我有有「的isValid（）」方法對他們和形式分量輸入，我要叫表單驗證反應

if(this.refs.username.isValid() 
    && this.refs.firstName.isValid() 
    && this.refs.lastName.isValid() 
    && this.refs.email.isValid() 
    && this.refs.password.isValid() 
)

而這僅僅是樣板的開始。如果我可以通過this.props.children迭代並調用isValid對他們很長的路，但我似乎無法做到這一點。

我似乎也無法遍歷this.refs並像這樣動態地執行它。我認爲。很確定我嘗試過。

但基本上，如果我不能詢問我的組件的孩子，並調用他們的方法，那麼在我/大家的應用程序中將會出現大量的鍋爐代碼。

有沒有人處理過這個呢？

感謝，

編輯 - 一些代碼來證明什麼，我已經試過

React.Children.map(this.props.children, function (
    var valid = child.isValid(); 
});

這裏的孩子有道具，參考和類型。這在一般情況下是有用的，但不適用於我的情況。我想訪問實際的實例，所以我可以調用一個有效的函數。

再次編輯

我欣賞的指針指向另一個答案，但是，我不覺得這是一個類似的問題。我不問如何驗證，我問是否有人找到任何好的方法來結束驗證。在另一篇文章中給出的答案基本上就像我上面的例子，非常冗長和重複性的，他們只顯示一個表單上的一個字段，所以它看起來不是很糟糕，但相信我幾個表單後，你會想要自殺。因此，爲了澄清，我要求，鑑於詢問每個子組件是否處於有效狀態的重複性質，如果不是，他們有什麼錯誤，然後彙總這些信息，有沒有更好的方法。也許如果你可以動態地遍歷孩子，你可以將功能包裝起來，但我一直無法做到這一點。

再編輯

這裏是一個回購，我正在搞這個東西。

https://github.com/reharik/react-demo/tree/master/src

它基本上是一個可編輯的顯示形式或什麼的。你轉到頁面並可以查看數據，但是如果你想編輯它，點擊按鈕。編輯表格並提交。這正是我所玩的，它可能很容易成爲所有常規形式的「RHForm」。

這很簡單，RHInput在更改時進行驗證，並且還有一個IsValid（）方法。目前，app.jsx必須在它的所有子節點上調用isValid（）。如果你看看RHEditableForm，你會發現這將是一個完美的地方，可以動態調用IsValid（），而不管發生在那裏。這可以被所有形式重用，我永遠不會/很少必須編寫驗證邏輯。此外，因爲這是「確定」按鈕的地方，它似乎也是驗證的正確位置。

來源

2015-04-01 Raif

也許看看：http://facebook.github.io/react/docs/top-level-api.html#react.children。請添加您嘗試過的代碼，以便我們提供幫助。 – WiredPrairie 2015-04-01 00:37:25

感謝您的回覆。我只是嘗試了這種方法（我不知道，謝謝），但是，我沒有看到它與做_.map有什麼不同。我得到一個對象，但它沒有任何在子上的方法。我確實得到了ref名稱，但我沒有看到如何使用它來獲取實際的子對象。我會在上面顯示一些代碼。 – Raif 2015-04-01 00:56:45

可能重複[如何正確驗證輸入值與React.JS？]（http://stackoverflow.com/questions/24019431/how-to-properly-validate-input-values-with-react-js） – z5h 2015-04-01 01:14:49

您的問題引起了我的興趣，到目前爲止我還沒有遇到這樣的問題，但是您提出的問題是合法的。所以，在迴應一下後，我找到了一種避免在refs或children中循環的解決方案（實際上如果在兒童身上循環但不在驗證時循環）。

我發現的解決方案是在每個表單字段上使用反應組件包裝，併爲表單本身使用反應元素。呈現時，表單反應組件會爲每個子項克隆一個額外的onComponentMounted屬性。它們在掛載時由表單字段調用。從這裏，事情很簡單。回調將把該字段添加到「fields」狀態屬性，該屬性將在提交表單時迭代;將要求暴露「isValid」方法的控件進行驗證。

這種方法可以很容易地形式結構如下所示：

React.render(<ValidatingForm> 
     <TextField name="firstName" /> 
     <TextField name="lastName"/> 
     <TextField name="email" /> 
     <TextField name="password" /> 
     <button type="submit">Signup</button> 
     </ValidatingForm>, document.getElementById('form1'));

完整的源代碼可以在這裏找到：http://jsfiddle.net/6tjz2b6r/。爲了簡單起見，只支持一個控件：TextField;但是，其他類型的控件可以輕鬆添加。

來源

2015-04-03 15:22:53 Cristik

表單驗證反應

回答

相關問題