score:1

Accepted answer

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)

Related Query

More Query from same tag