表单验证反应

我在想如何处理表单验证。目前，我有有“的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

表单验证反应

回答

相关问题