Question

我想知道人们如何处理表单验证。目前我的输入有＆＃34; isValid（）＆＃34;对于它们和表单组件的方法，我必须调用

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并动态地执行此操作。我认为。很确定我试过了。

但基本上如果我不能查询我的组件的孩子并在他们上面调用方法，那么在我/每个人的应用程序中都会有大量的锅炉板代码。

有没人处理过这个？

谢谢，

r

编辑 - 一些代码来演示我尝试过的内容

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

这里的孩子有道具，参考和类型。这在一般情况下很有用，但在我的情况下却没有。我想访问实际的实例，所以我可以调用一个有效的函数。

再次编辑

我很欣赏指向另一个答案的指针，但是，我并不觉得这是一个类似的问题。我没有问如何验证，我问是否有人找到任何好的方法来结束验证。在另一篇文章中给出的答案基本上就像我上面的例子一样，非常详细和重复，它们只在表单上显示一个字段，所以它看起来并不太糟糕但是在你打算用几种表格后相信我想要自杀

所以澄清一下，我问，鉴于每个子组件是否处于有效状态时的重复性质，如果没有，他们有什么错误，然后汇总这些信息，是否有更好的办法。也许如果你可以动态地遍历孩子，你可以将功能包起来，但我无法做到。

再次编辑

这是一个我正在弄乱这些东西的回购。

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

它基本上是一个可编辑的显示形式或其他。您转到该页面可以查看数据，但如果要编辑它，请单击按钮。编辑表单并提交。这就是我正在玩的东西，它可以很容易成为一个＆＃34; RHForm＆＃34;用于所有常规表格。

RHInput在更改时验证非常简单，并且还有一个IsValid（）方法。目前，app.jsx必须在所有孩子身上调用isValid（）。如果你看一下RHEditableForm，你会发现这将是动态调用IsValid（）的理想场所。这可以被所有形式重用，我从不/很少必须编写验证逻辑。此外，因为这是＆＃34; OK＆＃34;按钮是否也是放置验证的正确位置。

Answer 1

你的问题引起了我的兴趣，到目前为止我还没有遇到这样的问题，但你提出的问题是合法的。所以，在做了一点反应之后，我找到了一个解决方案，避免循环通过引用或子代（实际上，如果循环覆盖孩子而不是在验证时）。

我找到的解决方案是在每个表单字段上使用react组件包装器，并为表单本身使用react元素。渲染时，表单反应组件克隆每个子项的额外onComponentMounted属性。它们在安装时由表单字段调用。从这里开始，事情很简单。 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;但是，可以轻松添加其他类型的控件。

反应形式验证

1 个答案: