javascript - Marko JS 提交

Question

我无法让它工作，它不会 console.log(this.stat.first_name) ，我需要知道如何访问输入的输入表单值，以便我可以更改状态，然后在 postSubmit 函数中发出 axios post 请求。我首先执行 console.log 来测试它并确保数据移动正确。

任何事情都会有所帮助。

第一个问题被删除了，这是一个重新发布，因为我没有弄清楚问题所在。

class {
  onCreate() {
    this.state = {
      first_name: null,
      last_name: null,
      email: null,
      address: null,
      phone_number: null,
      email_promotion_optin: false
    };
  }
  postSubmit(event) {
    event.preventDefault();
    this.state.first_name = event.target.name.first_name;
    console.log(this.state.first_name);
  }
}

<form on-click('postSubmit')>
  <fieldset>
    <legend> Create Customer</legend>
      <div>
        <label>
          First Name: <input type="text" name="first_name">
        </label>
      </div>
      <div>
        <label>
          Last Name: <input type="text" name="last_name">
        </label>
      </div>
      <div>
        <label>
          Email: <input type="text" name="email">
        </label>
      </div>
      <div>
        <label>
          Address: <input type="text" name="address">
        </label>
      </div>
      <div>
        <label>
          Phone Number: <input type="text" name="phone_number">
        </label>
      </div>
      <div>
        <label>
          Submit <input type="submit">
        </label>
      </div>
   </fieldset>
</form>

更新!!!!!!:

我从 MarkoJS 文档中想到了这个，但仍然没有运气。我可能走在正确的道路上，或者我可能用很多不必要的废话污染了我的代码。

$ const axios = require('axios');

class {
  onCreate() {
    this.state = {
        first_name: '',
        last_name: '',
        email: '',
        address: '',
        phone_number: '',
        email_promotion_optin: false
    };
  }

  onFirstNameInput () {
    this.state.first_name = this.getEl('firstName').value;
  }

  onLastNameInput () {
    this.state.last_name = this.getEl('lastName').value;
  }

  onEmailInput () {
    this.state.email = this.getEl('email').value;
  }

  onAddressInput () {
    this.state.address = this.getEl('address').value;
  }

  onPhoneNumberInput () {
    this.state.phone_number = this.getEl('phoneNumber').value;
  }

  postSubmit() {
    axios.post('/api/v1/customers', this.state)
      .then(function (response) {
        console.log(response);
      })
    .catch(function (error) {
      console.log(error);
    });
  }

}



<form>
  <fieldset>
    <legend> Create Customer</legend>
    <div>
      <label>
        First Name: <input type="text" key="firstName" on-input('onFirstNameInput')>
      </label>
    </div>
    <div>
      <label>
        Last Name: <input type="text" key="last_name" on-input('oneLastNameInput')>
      </label>
    </div>
    <div>
      <label>
        Email: <input type="text" key="email" on-input('onEmailInput')>
      </label>
    </div>
    <div>
      <label>
        Address: <input type="text" key="address" on-input('onAddressInput')>
      </label>
    </div>
    <div>
      <label>
        Phone Number: <input type="text" key="phone_number" on-input('onPhoneNumberInput')>
      </label>
    </div>
  </fieldset>
  <div>
    <button on-click('postSubmit')>Submit</button>
  </div>
</form>

Answer 1

我调查了这个问题。代码未按预期工作的原因是 this.state 对象上的属性未定义为 enumerable。 MarkoJS 使用 Object.defineProperty 为状态属性创建 getter 和 setter，但它没有显式地将 enumerable 属性设置为 true，因此它是默认为false。我认为我们应该解决这个问题并打开一个 GitHub 问题来讨论:https://github.com/marko-js/marko/issues/964

同时，我建议使用以下解决方法来显式复制应通过 HTTP post 提交的属性:

postSubmit() {
  var request = {
    first_name: this.state.first_name,
    last_name: this.state.last_name,
    email: this.state.email,
    address: this.state.address,
    phone_number: this.state.phone_number,
    email_promotion_optin: this.state.email_promotion_optin
  }

  axios.post('/api/v1/customers', request)
    .then(function (response) {
      console.log(response);
    })
  .catch(function (error) {
    console.log(error);
  });
}