当没有任何迹象表明它是一个时，输入字段被视为密码字段

Question

我正在网站的首页上工作，在此上下文中，signup/login 表单组合。这些表单使用来自 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, and of the actual interpreted HTML.

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

美好的一天！

Answer 1

刚刚做了一些小改动，现在应该可以了老兄:)))))

导出默认观察者(({ form }) => { const isSuccess = state => (!state ? 'is-success' : 'is-danger');

return ( 题词 // 好场 {form.$('surname').label} {form.$('surname').error}

// 多个好字段 Je m'incris

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

); });

Answer 2

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

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

并进入 profileStore 本身：

  @observable fields = undefined;

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

现在每次都有效地从头开始重新创建表单，不再是问题。

当没有任何迹象表明它是一个时，输入字段被视为密码字段

Input field is being treated as a password field when nothing indicates that it is one

javascript

reactjs

mobx