FORM verilerini React Redux ile göndermenin en iyi yolu?

Question

Bu basit konuda çok şaşırdım! Sadece form verilerimi almak, doğrulamak, göndermek ve Ekspres API'ye bir posta isteği göndermek istiyorum. Ancak bundan önce, bunun nasıl gerçekleştirileceğine dair kapsamlı bir anlayışa sahip olduğumu düşünmüyorum. Ben this soru ve these ve başkalarının demet baktı ama bu en iyi yaklaşım olduğundan emin değilim.

Bir kaydolma sayfası için Bileşen tepki oluşturmak: Ben yapılacaktır varsayalım nasıl

budur. o JSON verilerini geçilecek nerede, düğme OnSubmit() fonksiyonu tıklandığında

class SignupForm extends Component { 
    constructor(props){ 
     super(props); 
     this.onSubmit = this.onSubmit.bind(this); 
    } 
    onSubmit(val){ 
     debugger; 
    } 
    render(){ 
     return (
      <form onSUbmit={ (e)=> this.onSubmit(e) }> 
       <input type="text" /> 
       <label></label> 
       <button type="submit">Submit</button> 
      </form> 
     ) 
    } 
} 

tetikler (gösteri için Basitleştirilmiş).

benim API AJAX arama yapmak ve sonra benim düşürücüler güncelleyecektir İşlemimi SignupAction() tetikleyebilir

{ 
    "name": "Kanye", 
    "surname": "West", 
    "email":"yeezy@goodmusic.com", 
    "password":"notsurehowthiswillwork" 
} 

. o react-redux-form veya redux-form gibi kütüphaneleri kullanarak geldiğinde

karışıklık çarpar. Sadece basitçe surnameemail ve password bir model veya name için bir şeyler yapmak istiyorum ama bu kütüphaneler olduğunu hissediyorum aşırı mühendislik kısa sürede onlar gibi kendi düşürücü sahip başlar başlamaz:

const store = createStore(combineForms({ 
    user: initialUser, 
})); 

MY DİĞER SEÇENEĞİ IS:

class SignupForm extends Component { 

    constructor(props){ 
     super(props); 
     this.state.form = { 
      name : '', 
      surname: '', 
      email: '', 
      password: '' 
     } 
    } 
    onSubmit(e){ 
     e.preventDefault(); 
     this.props.SignupAction(this.state.form); 
     // then reset the state agian to '' 
    } 
} 

Ama, sorum ... will t edilir etki performansı ve eğer öyleyse NEDEN?

Answer 1

redux-form'u kullanmanızı öneririm.

1. Giriş doğrulama
eylemi sevk
2. doğrulama başarılı olduktan sonra çağrılan bir onSubmit bir yöntem sağlar (bu nokta tarih ve dosya yüklemeleri dahil girdilere
3. Farklı tipte çağırmak için: Size aşağıdaki seçenekleri sunar API'niz ve güncelleme durumunuzu belirtin)

Yine de kullanmak istemiyorsanız (bunu kullanmanızı öneririm), formda gönderebileceğiniz şey yalnızca verilerinizi doğrulamak ve kapsayıcınıza bir eylem göndermek. Bu nedenle verilerinizi, bileşeninizdeki kapsayıcınıza aktardığınız bir iletiyi gönderirken, post/put API'sini çağırırsınız (redux formunda herhangi bir şey iletmenize gerek yoktur, doğrudan mağazadan okuyabilirsiniz).

onSubmit(val){ 
     debugger; 
    } 
    render(){ 
     const { onSubmit } = this.props //pass onSubmit from 
     return (
      <form onSubmit={ (e)=> {onSubmit}) }> 
       <input type="text" /> 
       <label></label> 
       <button type="submit">Submit</button> 
      </form> 
     ) 
    } 
} 

Konteyner: formlarla uğraşmak

mapDispatchToProps(dispatch){ 
    return { 
    onSubmit => { 
    //dispatch action 
    } 
    } 

Answer 2

Çok kolay yolu:

class UserInfo extends React.Component { 
 

 
    constructor(props) { 
 
    super(props); 
 
    this.handleSubmit = this.handleSubmit.bind(this); 
 
    } 
 

 
    handleSubmit(e) { 
 
    e.preventDefault(); 
 
    
 
    const formData = {}; 
 
    for (const field in this.refs) { 
 
     formData[field] = this.refs[field].value; 
 
    } 
 
    console.log('-->', formData); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
      <form onSubmit={this.handleSubmit}> 
 
      <input ref="phone" className="phone" type='tel' name="phone"/> 
 
      <input ref="email" className="email" type='tel' name="email"/> 
 
      <input type="submit" value="Submit"/> 
 
      </form> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default UserInfo;