Javascript 马尔科JS提交

我无法让它工作，它将不会

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>

类{
onCreate（）{
此.state={
名字：空，
姓氏：空，
电子邮件：空，
地址：空，
电话号码：空，
电子邮件\u促销\u选项：false
};
}
后期提交（活动）{
event.preventDefault（）；
this.state.first\u name=event.target.name.first\u name；
console.log（this.state.first_name）；
}
}
创建客户
名字：
姓氏：
电邮：
地址:
电话号码：
提交

更新！！！！！！！：

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

$const axios=require（'axios'）；
阶级{
onCreate（）{
此.state={
名字：''，
姓氏：“”，
电子邮件：“”，
地址：''，
电话号码：''，
电子邮件\u促销\u选项：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'）。值；
}
postSubmit（）{
axios.post（'/api/v1/customers'，this.state）
.然后（功能（响应）{
控制台日志（响应）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
}
创建客户
名字：
姓氏：
电邮：
地址:
电话号码：
提交

我调查了这个问题。代码未按预期工作的原因是

this.state

对象上的属性未定义为

可枚举

。MarkoJS使用

Object.defineProperty

为状态属性创建getter和setter，但它没有显式地将

可枚举属性设置为
true
，因此默认为
false
。我认为我们应该解决这个问题，并提出一个GitHub问题进行讨论：

同时，我建议使用以下变通方法显式复制应随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);
  });
}

您可以尝试使用按钮作为
Submit
并在那里调用您的
postSubmit
函数。您是否愿意帮助我将其安装到console。记录数据？不确定它是否有效，但使用类似
Submit
的方法，我仍然会出现空白，这让人沮丧。我相信问题在于
postSubmit（）
函数本身的定义。我不确定我试图从
事件
对象获取数据的方式是否正确。它甚至可能不是我需要使用的
event
，但我在任何地方都找不到使用marko（即marko、表单和文本输入字段）的任何实际示例。我们将拭目以待，看看社区会有什么样的结果，而我会在这几天里胡闹。这太脆弱了，我不敢相信这是一个公认的答案。