0

我不能让它工作，它不会console.log(this.stat.first_name)，我需要知道如何访问输入的输入表单值，以便我可以更改状态，然后在函数中发出axios发布请求。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>

更新！！！！！！：

我从 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>
4

1 回答 1

1

我调查了这个问题。代码未按预期工作的原因是this.state对象上的属性未定义为enumerable. MarkoJSObject.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);
  });
}
于 2018-01-02T18:06:35.833 回答