Question

在这种情况下，我正在网站的首页上注册/登录表单组合。这些表单使用来自mobx-react的本机表单，该表单由form.js观察者组成，为每个元素提供DOM结构，并提供相应的template.js文件来定义每个字段的作用。这意味着我可以在form.js中创建非描述字段，并在template.js中对其进行定义。可悲的是，我的其中一个字段被转换为密码输入，而没有任何内容可以将其转换为密码输入。

这是form.js的片段

export default observer(({ form }) => {
  const isSuccess = state => (!state ? 'is-success' : 'is-danger');

  return (
    <article className='tiles is-ancestor is-inline-flex drc-column'>
      <div className='tile is-vertical is-size-4 has-text-centered has-text-grey'>Inscription</div>
      <form className='tile is-parent is-vertical'>
        // good field
        <div className='tile is-child'>
          <label className='has-text-centered is-block' htmlFor={form.$('surname').id}>
                {form.$('surname').label}
            <input className={`input is-medium has-background-white-ter ${form.$('surname').isEmpty ? '' : isSuccess(form.$('surname').error)}`} id='signup-surname' {...form.$('surname').bind()} />
          </label>
          <p className='has-text-danger'>{form.$('surname').error}</p>
        </div>
        // multiple good fields
        <button className='tile is-child button is-large has-background-success is-fullwidth has-text-white' type='submit' onClick={form.onSubmit}><span className='is-size-6 is-uppercase'>Je m&apos;inscris</span></button>

        <p className={form.error ? 'has-text-danger' : 'has-text-success'}>{form.error}</p>
      </form>
    </article>
  );
});

这是硬币的另一面，位于template.js

  setup() {
    return {
      fields: [{
        name: 'name',
        label: 'Prénom',
        rules: 'required|string'
      }, {
        name: 'surname',
        label: 'Nom',
        rules: 'required|string'
      }, {
        name: 'company',
        label: 'Entreprise',
        rules: 'required|string'
      }, {
        name: 'phone',
        label: 'Numéro de téléphone',
        rules: 'required|numeric'
      }, {
        name: 'email',
        label: 'E-mail',
        rules: 'required|email|string'
      }, {
        name: 'password',
        label: 'Mot de passe',
        rules: 'required|string',
        type: 'password'
      }]
    };
  }

这里是a screenshot of the form itself和of the actual interpreted HTML。

我希望surname字段是常规文本输入，而不是密码输入。此时，我无法重做技术堆栈，以排除使用来自mobx-react的表单，它过去工作得很好。没有什么可以覆盖这些输入字段，这两个片段是唯一可控制的片段，我不确定下一步要去哪里。

美好的一天！

Answer 1

问题已解决。当您从登录表单重定向到注册表单时（手动或其他方式），这些字段未重置。由于登录表单上的第二个字段是密码，因此它会转换为注册表单的第二个字段，并保留密码类型。使用componentWillUnmount mobx钩子重置所述字段可以有效解决此问题：

  componentWillUnmount() {
    const { profileStore } = this.props;
    profileStore.resetFields();
  }

并进入profileStore本身：

  @observable fields = undefined;

  @action
  resetFields() {
    log.warn('resetFields');
    this.fields = undefined;
  }

现在，每次都可以从头开始有效地重新创建表单，而不再遇到任何问题。

Answer 2

进行了一些细微的更改，现在应该可以正常使用了：））））））

导出默认观察者（（{form}）=> { const isSuccess = state =>（！state？'is-success'：'is-danger'）;

返回（题词 //好领域 {form。$（'姓氏'）.label} {form。$（'姓氏'）。错误}

//多个好字段 Je m'inscris

    <p className={form.error ? 'has-text-danger' : 'has-text-success'}>{form.error}</p>
  </form>
</article>

）; }）;

如果什么都没有表明输入字段是一个，则将输入字段视为密码字段

2 个答案: