Calling React component method of redux-form

Question

Is there anyway to access the component method of a redux-form. I want my upload button to submit the form and also if user haven't select any file, then I will open the file select dialog.

My code

UploadModal.js

import React from 'react';
import Form from './components/Form';

class UploadModal extends React.Component {
    constructor(props) {
        super(props)

        this.onSubmit = this.onSubmit.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    onSubmit() {
        // call open file select dialog if haven't select any file
        this.refs.form.submit();
    }
    handleSubmit(values) {
        //handling submit
    }
    render() {
        return (
            <div>
                <p>Upload files</p>
                <Form ref="form" onSubmit={this.handleSubmit} />
                <Button onClick={this.onSubmit}>Upload</Button>
            </div>
        )
    }
}

Form.js

import React from 'react';
import { reduxForm } from 'redux-form';
import Dropzone from 'react-dropzone';

class Form extends React.Component {
    constructor(props) {
        super(props)
    }
    onOpenDialog() {
        // I want to access this method from Upload Modal
        this.refs.dropZone.open();
    }
    render() {
        return (
            <div>
                <Dropzone ref="dropZone">
                    <p>Please select file to upload</p>
                </Dropzone>
            </div>
        )
}

export default reduxForm({
   form: 'upload',
   fields: ['file'],
})(Form)

Avinash · Accepted Answer · 2020-04-23 18:36:41Z

Hope you've found a solution, if not here's a solution, string refs were deprecated and you should use function callbacks,

ref takes a callback function through which you can set the dropzoneref in the parent by passing a setter function to the child (setDropZoneRef)

Here's the code for the same

UploadModal

import React from "react";
import Form from "./components/Form";

class UploadModal extends React.Component {
  constructor(props) {
    super(props);
    //add a ref value to your state and a setter to set the ref
    this.setDropZoneRef = this.setDropZoneRef.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  onSubmit() {
    // call open file select dialog if haven't select any file
    //here use the formref you've set
    this.formRef.submit();
  }
  setDropZoneRef (ref) {
    this.dropZoneRef = ref
  }
  handleSubmit(values) {
    //handling submit
  }
  render() {
    return (
      <div>
        <p>Upload files</p>
        <Form ref={ref => (this.formRef = ref)} onSubmit={this.handleSubmit} />
        <Button onClick={this.onSubmit}>Upload</Button>
      </div>
    );
  }
}

Form

import React from 'react';
import { reduxForm } from 'redux-form';
import Dropzone from 'react-dropzone';

class Form extends React.Component {
    constructor(props) {
        super(props)
    }
    onOpenDialog() {
        // I want to access this method from Upload Modal
        // this.refs.dropZone.open();
    }
    render() {
        return (
            <div>
                <Dropzone ref={this.props.setDropZoneRef}>
                    <p>Please select file to upload</p>
                </Dropzone>
            </div>
        )
}

export default reduxForm({
  form: 'upload',
  fields: ['file'],
})(Form)

Collectives™ on Stack Overflow

Calling React component method of redux-form

1 Answer 1

UploadModal

Form

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UploadModal

Form

Comments

Your Answer

Sign up or log in

Post as a guest

Related