फॉर्म के इनपुट में रेडक्स-फॉर्म बाइंडिंग को वायरस कैसे करें

Question

redux-form एक प्रतिक्रिया अनुप्रयोग में रूपों के लिए रेडक्स बाइंडिंग प्रदान करने के लिए एक बहुत ही आकर्षक लाइब्रेरी है, जो सुपर-सुविधाजनक होना चाहिए। दुर्भाग्यवश, लाइब्रेरी के अपने उदाहरणों का उपयोग करके, मैं वास्तव में कुछ भी बाध्य करने में असफल रहा हूं, जो कि सुविधाजनक है।

मैं प्रोजेक्ट साइट पर नमूना कोड का उपयोग करने और इसे कई बार बाधाओं को खोजने का प्रयास कर रहा हूं, इसे ईमानदारी से पुन: पेश करने का प्रयास करने के बावजूद। मैं इस एपीआई को गलत व्याख्या क्यों कर रहा हूं? क्या डेमो कोड लिखा गया था जब एपीआई स्थानांतरित हो गया है? क्या मुझे रेडक्स ज्ञान के कुछ महत्वपूर्ण और स्पष्ट टुकड़े याद आ रहे हैं?

समस्या 1: हैंडल के लिए हस्ताक्षर सबमिट विधि handleSubmit(data) होना चाहिए। लेकिन हैंडल स्वीट वर्तमान में सबमिट कार्रवाई से केवल प्रतिक्रिया सिंथेटिक इवेंट प्राप्त कर रहा है, और कोई डेटा नहीं है। (वास्तव में, उदाहरण के रूप में लिखित उदाहरण का उपयोग दो अलग-अलग घटनाओं को भेज रहा था, प्रतीत होता है कि प्रपत्र पर onSubmit कार्रवाई और onClick बटन पर कार्रवाई की गई थी।) वह डेटा कहां से आ रहा है, और मैं क्यों विफल रहा हूं इसे हैंडलर को पास करें?

समस्या 2: एक महत्वपूर्ण fields ऑब्जेक्ट है जिसे फ़ॉर्म पैरेंट पर परिभाषित किया जाना चाहिए और आपके फॉर्म के प्रोप के रूप में आपूर्ति की जानी चाहिए। दुर्भाग्यवश, उस fields ऑब्जेक्ट का आकार दस्तावेज़ों में और न ही इसका उद्देश्य, वास्तव में समझाया गया है। क्या यह अनिवार्य रूप से प्रारंभिक 'राज्य' वस्तु है? त्रुटियों के लिए रनटाइम पर उपयोग करने के लिए Redux-form के लिए एक साधारण ऑब्जेक्ट कंटेनर इत्यादि? connectReduxForm में फ़ील्ड नामों पर fields पर प्रोप से मेल करके त्रुटि को रोकने के लिए मुझे यह मिल गया है, लेकिन क्योंकि डेटा बाध्यकारी नहीं है, मुझे लगता है कि यह सही आकार नहीं है।

समस्या 3: खेतों ऑटो बाध्य onBlur और onChange के लिए संचालकों को हो सकता है, इतना है कि वे दुकान उचित रूप से अद्यतन अपेक्षा की जाती है। ऐसा कभी नहीं हो रहा है। (जो हम Redux देव-उपकरण के लिए धन्यवाद देख सकते हैं हालांकि, handleSubmit सफलतापूर्वक initialize कार्रवाई है, जो दुकान, कम करने का सुझाव देते हैं, और अन्य बुनियादी पाइपलाइन सभी काम कर रहे हैं भेजने रहा है।।)

समस्या 4: validateContact है एक बार init पर फायरिंग, लेकिन फिर कभी नहीं।

यह दुर्भाग्य से एक साधारण पहेली के लिए बहुत जटिल है, लेकिन संपूर्ण रेपो (यह केवल मूल ReduxStarterApp है, साथ ही यह फॉर्म पीओसी) is available here।

import React  from 'react'; 
import { connect } from 'react-redux'; 
import {initialize} from 'redux-form'; 

import ContactForm from '../components/simple-form/SimpleForm.js'; 

const mapStateToProps = (state) => ({ 
    counter : state.counter 
}); 
export class HomeView extends React.Component { 
    static propTypes = { 
    dispatch : React.PropTypes.func.isRequired, 
    counter : React.PropTypes.number 
    } 

    constructor() { 
    super(); 
    } 
    handleSubmit(event, data) { 
    event.preventDefault(); 
    console.log(event); // this should be the data, but is an event 
    console.log(data); // no data here, either... 
    console.log('Submission received!', data); 
    this.props.dispatch(initialize('contact', {})); // clear form: THIS works 
    return false; 
    } 

    _increment() { 
    this.props.dispatch({ type : 'COUNTER_INCREMENT' }); 
    } 


    render() { 
    const fields = { 
     name: '', 
     address: '', 
     phone: '' 
    }; 

    return (
     <div className='container text-center'> 
     <h1>Welcome to the React Redux Starter Kit</h1> 
     <h2>Sample Counter: {this.props.counter}</h2> 
     <button className='btn btn-default' 
       onClick={::this._increment}> 
      Increment 
     </button> 
     <ContactForm handleSubmit={this.handleSubmit.bind(this)} fields={fields} /> 
     </div> 
    ); 
    } 
} 

export default connect(mapStateToProps)(HomeView); 

और आंतरिक रूप घटक:

और, यहां बाहरी घटक है,

import React, {Component, PropTypes} from 'react'; 
import {connectReduxForm} from 'redux-form'; 

function validateContact(data) { 
    console.log("validating"); 
    console.log(data); 
    const errors = {}; 
    if (!data.name) { 
    errors.name = 'Required'; 
    } 
    if (data.address && data.address.length > 50) { 
    errors.address = 'Must be fewer than 50 characters'; 
    } 
    if (!data.phone) { 
    errors.phone = 'Required'; 
    } else if (!/\d{3}-\d{3}-\d{4}/.test(data.phone)) { 
    errors.phone = 'Phone must match the form "999-999-9999"'; 
    } 
    return errors; 
} 

class ContactForm extends Component { 
    static propTypes = { 
    fields: PropTypes.object.isRequired, 
    handleSubmit: PropTypes.func.isRequired 
    } 

    render() { 
    const { fields: {name, address, phone}, handleSubmit } = this.props; 
    return (
     <form onSubmit={handleSubmit}> 
     <label>Name</label> 
     <input type="text" {...name}/>  {/* will pass value, onBlur and onChange */} 
     {name.error && name.touched && <div>{name.error}</div>} 

     <label>Address</label> 
     <input type="text" {...address}/> {/* will pass value, onBlur and onChange*/} 
     {address.error && address.touched && <div>{address.error}</div>} 

     <label>Phone</label> 
     <input type="text" {...phone}/> {/* will pass value, onBlur and onChange */} 
     {phone.error && phone.touched && <div>{phone.error}</div>} 

     <button type='submit'>Submit</button> 
     </form> 
    ); 
    } 
} 

// apply connectReduxForm() and include synchronous validation 
ContactForm = connectReduxForm({ 
    form: 'contact',      // the name of your form and the key to 
             // where your form's state will be mounted 
    fields: ['name', 'address', 'phone'], // a list of all your fields in your form 
    validate: validateContact    // a synchronous validation function 
})(ContactForm); 

// export the wrapped component 
export default ContactForm; 

Answer 1

connectReduxForm एक और घटक है जो fields और handleSubmit रंगमंच की सामग्री में गुजर हैंडल के साथ अपने घटक लपेटता लेकिन आप उन्हें अपने आप में गुजरकर दूर उड़ रहे हैं।

इस बजाय (onSubmit को प्रोप का नाम बदला) का प्रयास करें:

<ContactForm onSubmit={this.handleSubmit.bind(this)}/> 

और ContactForm में, pass your own submit handler to the handleSubmit function provided by redux-form:

<form onSubmit={handleSubmit(this.props.onSubmit)}> 

मैं React developer tools का उपयोग करना चाहिये क्या हो रहा है की बेहतर तस्वीर प्राप्त करने के लिए - आप देखेंगे कि कैसे Redux-form आपके घटक को लपेटता है और passes it a whole bunch of props, as documented in its README।

Answer 2

जॉनी बुकानन, जो सबसे महत्वपूर्ण बात को कवर करने के लिए धन्यवाद: ऐसा नहीं करते हैं के रूप में मैंने किया था और स्वचालित रूप से लगता है कि अगर सहारा अपने घटक में आवश्यक हैं, तो आप उन्हें अपने आप को उपलब्ध कराने की आवश्यकता चाहिए। connectReduxForm पर उच्च-आदेश फ़ंक्शन का पूरा बिंदु उन्हें रैपर घटक में प्रदान करना है। फिक्सिंग ने तुरंत मुझे ईवेंट-हैंडलर दिए, सब कुछ सबमिट करने के अलावा।

अन्य महत्वपूर्ण निरीक्षण यहाँ था:

नोट - आप कनेक्ट नहीं कर रहे हैं, तो() अपने आप को ing (और यह अनुशंसित है कि आप जब तक आप एक उन्नत उपयोग के मामले कि नहीं है, इसकी आवश्यकता है), आपको फॉर्म पर रेड्यूसर को माउंट करना होगा।

मुझे उस बिंदु को नहीं मिला। लेकिन, कार्यान्वयन यहाँ है:

import { createStore, combineReducers } from 'redux'; 
import { reducer as formReducer } from 'redux-form'; 
const reducers = { 
    // ... your other reducers here ... 
    form: formReducer   // <---- Mounted at 'form' 
} 
const reducer = combineReducers(reducers); 
const store = createStore(reducer); 

formReducer formReducer में संदर्भित नहीं किया जा सकता है, लेकिन वाक्य रचना form: formReducer की आवश्यकता है। यह सुधार था जो handleSubmit को ठीक से सक्षम करता था।