Mẫu xử lý phản hồi gửi

Question

Tôi đang cố gắng tạo biểu mẫu trong React/Redux. Bây giờ tôi chỉ muốn biểu mẫu kích hoạt hàm handleSubmit của tôi khi biểu mẫu được gửi. Tuy nhiên, tại thời điểm này, có vẻ như chức năng được kích hoạt ngay lập tức khi tải trang ...

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

Tôi biết phần còn lại của mã không hoàn toàn chính xác nhưng mối quan tâm chính của tôi bây giờ chỉ là nhận hành động onSubmit được kích hoạt vào đúng thời điểm.

Cảm ơn trước!

Answer 1

Có vẻ như bạn không ràng buộc handleSubmit của mình.

Từ the docs:

Phương pháp theo ngữ nghĩa tương tự như lớp ES6 thường xuyên, có nghĩa là họ không tự động liên kết này với ví dụ.

Bạn đã có ba lựa chọn

1. Thêm một constructor và làm các ràng buộc đó (đề nghị):

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

2. Bind trực tiếp:

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

3. Use arrow => chức năng

   onSubmit={() => this.handleSubmit}

Answer 2

Bạn cần phải vượt qua handleSubmit như một chỗ dựa

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

Sau đó gán prop đó đến nút trên render chức năng của các thành phần SubmmitButton.

// submmit button component @render method 

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