Question

我刚开始使用React和Meteor。我想创建一个灵活的表单验证，但不清楚通信如何工作。

这里是mu起点：

Form = React.createClass(
{
    onSubmit(e)
    {
        e.preventDefault();

    },
    render()
    {
    return (
      <form id="a" onSubmit={this.onSubmit}>
      {this.props.children}
      </form>
    )
    }
});


Input = React.createClass(
{
    render()
    {
    return (
             <input type="text"/>
           )
    }
});

Button = React.createClass(
{
    render()
    {
    return (
             <button value="submit" />
           )
    }
});

和布局类似（稍后使用id属性和表单提交方法）

Input = React.createClass(
{
    render()
    {
    return (
             <Form>
               <Input />
               <Button />
             </Form>
           )
    }
});

但是如何循环遍历所有Input组件并获得每个字段的volue，我是否需要遍历所有子节点并获取ref的标签（this.refs.input - ）？

我想验证每个字段的设置错误消息（通过状态和componentWillReceiveProps）

Answer 1

我会查看像tcomb-form这样的库，它提供了你想要的验证，但也处理表单渲染，并有一个简单的声明模型来定义表单需要的内容。我也发现它是相当可定制的。

通过组件形成通信

1 个答案: