Marko JS提交

Question

我无法使其工作，它不会axios，我需要知道如何访问输入的输入表单值，以便我可以更改状态然后创建{{1}在postSubmit函数中发布请求。我首先进行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>

UPDATE !!!!!!：

我从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帖子提交的属性：

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);
  });
}