रिएक्ट रेडक्स के साथ फॉर्म डेटा सबमिट करने का सबसे अच्छा तरीका?

Question

मैं इस साधारण मुद्दे पर फंस गया हूं! मैं बस अपना फॉर्म डेटा लेना चाहता हूं, इसे मान्य कर सकता हूं, इसे सबमिट कर सकता हूं और एक्सप्रेस एपीआई को एक पोस्ट अनुरोध जमा करना चाहता हूं। लेकिन इससे पहले, मुझे नहीं लगता कि मुझे यह पूरा करने के बारे में पूरी तरह से समझ है। मैंने this प्रश्न और these और दूसरों के समूह को देखा लेकिन मुझे यकीन नहीं है कि यह सबसे अच्छा तरीका है।

यह वह जगह है मैं कैसे मान यह किया जाएगा:

मुझे साइन अप पेज के लिए घटक प्रतिक्रिया पैदा करते हैं। (प्रदर्शन के लिए सरलीकृत)

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

जब बटन ऑनसबमिट() फ़ंक्शन क्लिक किया जाता है चलाता है, जहां यह JSON डेटा पारित हो जाएगा।

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

मैं अपने कार्रवाई SignupAction() जो मेरे एपीआई के लिए एक AJAX कॉल कर देगा और फिर मेरी reducers अद्यतन कहाँ को गति प्रदान कर सकते हैं।

भ्रम गुणा जब यह react-redux-form या redux-form तरह पुस्तकालयों का उपयोग करने के लिए आता है। मैं बस एक मॉडल या name के लिए कुछ, surnameemail और password करना चाहते हैं, लेकिन मुझे लगता है कि इन पुस्तकालयों हैं ओवर-इंजीनियर जैसे ही वे की तरह अपने स्वयं के कम करने के होने शुरू:

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

मेरी चारा नहीं है:

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 '' 
    } 
} 

लेकिन, मेरे सवाल है ... टी होगा उसका प्रभाव प्रदर्शन और यदि ऐसा है तो क्यों?

Answer 1

मैं redux-form का उपयोग करने का सुझाव दूंगा।

1. इनपुट सत्यापन
2. अलग
3. एक ऑनसबमिट विधि है जो आपके सत्यापन सफल होता है के बाद कहा जाता है प्रदान करता है (इस बिंदु है तारीख और फ़ाइल अपलोड सहित आदानों पर प्रकार जहाँ आप कार्रवाई प्रेषण कॉल करने के लिए: यह आप निम्नलिखित विकल्प देता है अपने एपीआई और अद्यतन राज्य)

लेकिन अगर अभी भी (मैं दृढ़ता से इसका उपयोग करने की सिफारिश करेंगे) का उपयोग करना चाहते नहीं है, आप क्या कर सकते फार्म पर है सिर्फ अपने डेटा सत्यापित करें और अपने कंटेनर में एक कार्रवाई प्रेषण सबमिट करें। तो अपने डेटा को अपने कंटेनर से पैरामीटर के रूप में पास करें जहां आप एक एक्शन कॉल पोस्ट/एपीआई एपीआई भेजते हैं (रेडक्स फॉर्म में आपको कुछ भी पास करने की ज़रूरत नहीं है, आप सीधे स्टोर से पढ़ सकते हैं)।

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

कंटेनर:

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

Answer 2

बहुत आसान रूपों से निपटने के लिए जिस तरह से:

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;