Modulo handle di risposta submit

Question

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 ...

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!

Answer 1

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}

Answer 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>