2016-07-08 42 views
5

Sto provando a creare un modulo in React/Redux. Per ora voglio solo che il form attivi la mia funzione handleSubmit quando il modulo viene inviato. Tuttavia, al momento sembra che la funzione viene attivata istantaneamente il caricamento della pagina ...Modulo handle di risposta submit

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

So che il resto del codice non è tutto corretto ancora, ma la mia preoccupazione principale ora è appena l'azione onSubmit innescato al momento giusto

Grazie in anticipo!

risposta

20

Sembra che tu non leghi il tuo handleSubmit.

Da the docs:

metodi seguono la stessa semantica classi ES6 regolari, il che significa che non impegnano automaticamente questo per l'istanza.

Hai tre opzioni

  1. aggiungere un costruttore e fare il legame lì (consigliato):

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

  2. Bind direttamente:

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

  3. Usa freccia => funzioni

    onSubmit={() => this.handleSubmit}

+1

2 primi funzionano ma la terza opzione non funziona. Dovrebbe essere così: onSubmit = {() => this.handleSubmit()} –

-2

devi passare la handleSubmit come un puntello

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

Poi assegnare tale prop al pulsante la funzione di rendere il componente SubmmitButton.

// submmit button component @render method 

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

[Nota che inviano è sparato solo l'elemento del modulo, non il pulsante o inviare input. (I moduli vengono inviati, non i pulsanti.)] (Https://developer.mozilla.org/en-US/docs/Web/Events/submit). Quindi non dovresti mettere "onSubmit" sul pulsante. –

+0

Questo era solo un nome per la proprietà – Raulucco

+0

Il punto è che il tuo suggerimento supera completamente l'evento 'onsubmit' dell'elemento form. –

Problemi correlati