रिएक्ट हैंडल फॉर्म सबमिट करें

Question

मैं रिएक्ट/रेडक्स में एक फॉर्म बनाने की कोशिश कर रहा हूं। अभी के लिए मैं सिर्फ फॉर्म को अपने फ़ंक्शन हैंडल को ट्रिगर करना चाहता हूं सबमिट करें जब फ़ॉर्म सबमिट किया गया हो। हालांकि इस समय ऐसा लगता है कि समारोह पृष्ठ लोड पर तुरन्त शुरू हो रहा है ...

export default class AssetsAdd extends React.Component { 

    componentDidMount() { 
    console.log(this) 
    } 

    handleSubmit(event) { 
    if (this.refs.titleInput !== '') { 
     event.preventDefault(); 
     var asset = { 
     date: '', 
     title : this.refs.titleInput.value, 
     id : '', 
     type: this.refs.typeInput.value 
     } 

     return this.props.dispatch(addAsset(asset)) 
    } 


    } 

    render() { 
    return (
     <div> 
     <Row> 
      <Portlet title='New Asset' form> 
      <Form horizontal onSubmit={this.handleSubmit}> 
       <FormGroup> 
       <Label text='Title' size='3' /> 
       <Input ref="titleInput" placeholder='Enter asset title' size='4'/> 
       </FormGroup> 
       <FormGroup> 
       <Label text='Type' size='3' /> 
       <Input ref="typeInput" placeholder='Enter asset type' size='4'/> 
       </FormGroup> 
       <FormGroup> 
       <Label text='Description' size='3' /> 
       <Input ref="descriptionInput" placeholder='Enter asset description' size='4'/> 
       </FormGroup> 
       <FormGroup> 
       <Label text='Documentation' size='3' /> 
       <Input ref="documentationInput" placeholder='Enter documentation URL' size='4'/> 
       </FormGroup> 
       <FormActionBar> 
       <SubmitButton value='Submit'/> 
       <CancelButton value='Cancel'/> 
       </FormActionBar> 
      </Form> 
      </Portlet> 
     </Row> 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
    assets: state.assets 
    }; 
} 

export const AssetAddContainer = connect(mapStateToProps)(AssetsAdd); 

पर मैं कोड के बाकी सही अभी तक पता नहीं सब है लेकिन मेरी मुख्य चिंता अब सिर्फ ऑनसबमिट कार्रवाई शुरू हो रही है सही समय पर।

अग्रिम धन्यवाद!

Answer 1

लग रहा है।

the docs से

:

तरीके नियमित ES6 वर्ग के रूप में एक ही अर्थ विज्ञान का पालन करें, जिसका अर्थ है कि वे स्वचालित रूप से उदाहरण के लिए इस बाँध नहीं है।

आपके पास तीन विकल्प

1. एक निर्माता जोड़े और वहाँ बाध्यकारी कर मिल गया है (अनुशंसित):

   this.handleSubmit = this.handleSubmit.bind(this);

2. सीधे बाइंड:

   onSubmit={this.handleSubmit.bind(this)}

3. उपयोग => कार्यों

   onSubmit={() => this.handleSubmit}

Answer 2

आप फिर SubmmitButton घटक के समारोह प्रस्तुत करना पर बटन है कि प्रोप आवंटित handleSubmit एक प्रोप

<SubmitButton value='Submit' onSubmit={this.handleSubmit.bind(this)}/> 

के रूप में पारित करने के लिए की जरूरत है। जैसे आप अपने handleSubmit बाध्यकारी नहीं कर रहे हैं

// submmit button component @render method 

<button onClick={this.props.onSubmit} >Submit</button>