Formularz obsługi formularza odpowiedzi prześlij

Question

Próbuję utworzyć formularz w React/Redux. Na razie chcę tylko, aby formularz wywoływał moją funkcję handleSubmit po przesłaniu formularza. Jednak w tej chwili wygląda na to funkcja jest wyzwalany natychmiast na stronie obciążenia ...

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

wiem reszta kodu nie jest poprawne, ale jeszcze teraz moim głównym problemem jest po prostu uzyskiwanie onSubmit działanie wyzwalane w odpowiednim momencie.

Z góry dzięki!

Answer 1

Wygląda na to, że nie wiążesz swojego handleSubmit.

Od the docs:

Metody podążać tą samą semantykę jak regularne zajęcia ES6, co oznacza, że ​​ nie automatycznie powiązać to do instancji.

Masz trzy opcje

1. dodać konstruktora i zrobienia wiązania (zalecane):

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

2. Bind bezpośrednio:

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

3. Użyj strzałka => funkcje

   onSubmit={() => this.handleSubmit}

Answer 2

Trzeba zdać handleSubmit jako rekwizyt

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

Następnie przypisać rekwizyt do przycisku na funkcji renderowania komponentu SubmmitButton.

// submmit button component @render method 

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