反应中的表单验证答案

【问题标题】：form validation in react反应中的表单验证
【发布时间】：2015-06-05 12:08:36
【问题描述】：

我想知道人们如何处理表单验证。目前我的输入有“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();
});

这里的 child 有 props、ref 和 type。这在一般情况下很有帮助，但对我的情况没有帮助。我想访问实际实例，以便可以在其上调用有效函数。

再次编辑

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

所以为了澄清，我要问的是，考虑到询问每个子组件是否处于有效状态的重复性质，如果没有，他们有什么错误，然后汇总这些信息，有没有更好的方法。也许如果您可以动态迭代子项，您可以将功能包装起来，但我无法做到这一点。

再次编辑

这是一个我正在搞乱这些东西的仓库。

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

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

RHInput 验证更改非常简单，并且还有一个 IsValid() 方法。目前 app.jsx 必须在它的所有子节点上调用 isValid() 。如果您查看 RHEditableForm，您会发现这将是对其中发生的任何内容动态调用 IsValid() 的理想场所。这可以被所有表单重用，我永远/很少需要编写验证逻辑。此外，由于这是“确定”按钮所在的位置，因此它似乎也是放置验证的正确位置。

【问题讨论】：

也许看看：facebook.github.io/react/docs/top-level-api.html#react.children。请添加您尝试过的代码，以便我们提供帮助。
感谢您的回复。我刚刚尝试了这种方法（我不知道，谢谢）但是，我看不出它与做 _.map 有什么不同。我得到了一个对象，但它没有孩子身上的任何方法。我确实得到了 ref 名称，但我不知道如何使用它来获取实际的子对象。我会在上面展示一些代码。
How to properly validate input values with React.JS?的可能重复
啊..不，儿童帮手不会有任何帮助。它们仅代表稍后将创建的内容，而不是实际实例。你可以使用ref：jsfiddle.net/wiredprairie/wk8eo9v4
是的，这行得通。它会比打字更好。如果我可以有一个带有取消和保存按钮的表单元素，然后有嵌套的输入，那就太好了。也许我应该考虑为此使用助焊剂。我的意思是我正在使用数据通量，但我可能会在每次输入随着输入的有效性等而改变时触发动作。但我想知道这是否不会是动作爆炸。

标签： forms validation metaprogramming reactjs

【解决方案1】：

你的问题让我很感兴趣，到目前为止我还没有遇到过这样的问题，但你提出的问题是合法的。所以，在玩了一点 react 之后，我找到了一个避免循环遍历 ref 或子项的解决方案（实际上 if 循环遍历子项，但在验证时不循环）。

我找到的解决方案是在每个表单字段上使用 react 组件包装器，并为表单本身使用一个 react 元素。呈现时，form react 组件使用额外的onComponentMounted 属性克隆每个孩子。它在安装时由表单字段调用。从这里开始，事情就简单了。 onComponentMounted 回调会将字段添加到“字段”状态属性，该属性将在提交表单时被迭代；将要求公开“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；但是，可以轻松添加其他类型的控件。

【讨论】：