Marko JS on-submit

Question

Ich kann dies nicht zur Arbeit, es wird nicht console.log(this.stat.first_name), muss ich wissen, wie auf die Eingabeformular Werte zugreifen, die eingegeben werden, so kann ich den Status ändern und dann eine axios Postanforderung in der postSubmit Funktion. Ich tue das console.log zuerst, um es zu prüfen und Datenbewegung korrekt zu erhalten.

Alles wird helfen.

Erste Frage wurde gelöscht, dies ist ein Repost, da ich das Problem nicht herausgefunden habe.

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 !!!!!!:

Ich habe mit diesem aus MarkoJS Dokumentation kommen, aber noch kein Glück. Ich bin vielleicht auf dem richtigen Weg oder ich verschmutze meinen Code mit viel unnötigem Mist.

$ 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

Ich schaute in das Problem. Der Grund, dass der Code nicht wie erwartet funktioniert, liegt darin, dass die Eigenschaften des Objekts this.state nicht als enumerable definiert sind. MarkoJS verwendet Object.defineProperty, um Getter und Setter für die Statuseigenschaften zu erstellen, setzt die Eigenschaft enumerable jedoch nicht explizit auf true, so dass es standardmäßig false ist. Ich denke, wir sollten dieses Problem beheben und eröffnen eine GitHub Ausgabe bis zu diskutieren: https://github.com/marko-js/marko/issues/964

In der Zwischenzeit empfehle ich die folgende Abhilfe explizit über die Eigenschaften zu kopieren, die mit der HTTP-Post eingereicht werden sollen:

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