javascript - 需要一种更好的方法来使用 React.js 处理复杂的条件表单逻辑和验证

Question

我目前正在构建一个相当复杂的表单，其中包含大量条件逻辑。我的意思是，当用户选中一个选项时，可能会显示或隐藏 1 个或多个其他选项 - 您之前可能已经见过很多次了。

使用 Ractive 的 Mustache 模板和许多 {{#if }} 语句我已经创建了表单，但验证和提交的逻辑需要改进。我需要仅当所有“可见”字段都有效时才启用提交按钮，因此我得出结论，每个字段都需要一个 isInUse 属性以及 isValid，请参阅下面的示例:

data: {
    foo: {
        isValid: false,
        isInUse: false,
        value: ''
    }
}

原因是字段可以可见，但随后的选项可以隐藏它，并且它可能仍然具有用户不需要提交的值。

我还确定，更改 isInUse 属性的唯一可靠方法是在我的数据中创建一个可以从我的模板访问的函数，如下所示:

data: {
    foo: {
        isValid: false,
        isInUse: false,
        value: ''
    },

    isInUse: function (keypath, bool) {
        ractive.set(keypath, bool);
    }
}

在我的模板中使用它，如下所示:

{{#if choice.email}}
      {{ isInUse('validate.email.isInUse', true) }}
      {{ isInUse('validate.phone.isInUse', false) }}

      <label for="email">Email</label>
      <input type="text" id="email" value="{{validate.email.value}}">
{{/if}}

这意味着我能够更改模板端的值..这意味着我可以检查每个字段是否正在使用且有效..现在这是我质疑实现的地方，这是一个好主意吗？

我在 jsbin 上创建了一个简单版本的表单(它完全适用于验证和提交)，请参见此处:http://jsbin.com/wasoxa/2/edit?html,js,output但我的形式要复杂得多，所以我想找到一种优雅的方式来处理所有这些。

Answer 1

从模板内调用 isInUse 是一个非常有创意的解决方案，但不幸的是很可能会崩溃!

您应该将模板中的表达式视为只读 - 您可以在表达式中调用函数，但只是为了获取其值，而绝不会产生副作用，例如设置另一个值(一种可能的异常(exception)是记录输出以进行调试)。原因是您无法直接控制何时调用该函数 - Ractive 代表您处理该问题 - 因此您可能会得到意想不到的结果。在上面的示例中，将 choice.email 从 true 更改为 false 将不会达到预期的效果。

您可能需要计算属性。这些可以像常规属性一样在模板内读取，只不过它们的值取决于其他数据(或其他计算属性):

ractive = new Ractive({
  el: 'body',
  template: 'twice {{foo}} is {{doubleFoo}}',
  data: { foo: 1 },
  computed: {
    doubleFoo: function () {
      return 2 * this.get( 'foo' );
    }
  }
});

每当 foo 发生变化时，doubleFoo 就知道(因为我们在其定义中调用了 this.get('foo'))它应该重新计算本身。您可以使用计算值，就像使用任何其他值一样 - 例如ractive.observe('doubleFoo',doSomething)。

这对于验证很有用:

var ractive = new Ractive({
  el: 'main',
  template: `
    <h2>contact type</h2>
    <label>
      <input type="radio" name="{{contactType}}" value="email"> email
    </label>
    <label>
      <input type="radio" name="{{contactType}}" value="telephone"> telephone
    </label>
		
    <h2>name</h2>
    <input type="text" value="{{name}}">
    <p>name is valid: {{nameIsValid}}</p>
		
    {{#if contactType === "email"}}
      <h2>email</h2>
      <input type="text" value="{{email}}">
      <p>email is valid: {{emailIsValid}}</p>
    {{/if}}`,
  computed: {
    nameIsValid: function () {
      return !!this.get( 'name' );
    },
    emailIsValid: function () {
      var email = this.get( 'email' );

      // never actually use this regex
      return /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test( email );
    }
  }
});

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<main></main>