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)
Source: stackoverflow.com
Related Query
- Test React component method is calling function pass as a prop
- Calling a Android Native UI component method from React native Js code
- How to test React state after calling a component method that updates state - using Enzyme
- Set Redux State in handleSubmit method of Formik React form
- Which React cycle method should I use to re-render component when redux state has changed?
- React Component calling method to a different component
- React + Redux - Call a method of a component wrapped for the Redux Provider
- How to unit test the output of a React component method in a React Router / Redux app with Enzyme
- Calling React component method of redux-form
- React JS : Calling Child component method within parent component (React with typescript)
- calling method on top-level react component
- Calling async method in React functional component
- How to design complex multi component form in react redux
- Unable to use the same form component for Add or Edit Mode with React & Redux
- A react component is not rendered even after calling it through ReactDOM.render( ) method
- When calling a method in a react class component from a react functional component, is the state visible?
- Invoke Method in React Component after completion of API call in react redux saga
- Can you force a React component to rerender without calling setState?
- Why does calling react setState method not mutate the state immediately?
- Difference between component and container in react redux
- React + Redux - What's the best way to handle CRUD in a form component?
- Call a React component method from outside
- Call a React component method from outside
- Jest Enzyme test a React component that returns null in render method
- React - Can A Child Component Send Value Back To Parent Form
- React Functional component: calling as function vs. as component
- Prevent react component from rendering twice when using redux with componentWillMount
- Error withRef is removed. To access the wrapped instance, use a ref on the connected component when using Redux Form
- React Redux - Is adding async method in a Reducer an anti pattern?
- React calling a method on load only once
More Query from same tag
- Rendering CSS transition when React element's text changes
- What is the usage of componentsProps in Material-UI components?
- How to fill in extra grid items in empty spaces?
- Changing colour of active bootstrap nav-link using styled component in Nextjs app.(typescript)
- Prevent web pack from bundling react
- how to limit the characters of an array
- values inside foreach pushes undefined?
- SessionStorage values get overwritten on reload instead of persisting
- How to get transitions to work each time an element is clicked
- Doing a countdown in React
- What is uncontrolled input field in a React app
- Typescript does not properly infer this.props inside HOC
- Issue with Cors in React.js localhost and Node Express server
- Local storage not working on iPad browser private window
- I have an element (inside a function) that I need to get using "document.getElementById" (which lies outside). How do I do this?
- Render css class in image tag in react
- React responsive nav component es6 function not firing
- Get indian current time and date
- Uploading Image to Cloudinary Express.js React Axios post request
- TypeError: this.state.toLocaleTimeString is not a function in React
- state is updated but not getting in other handler in ReactJs
- ReactJS setState multidimensional array variable keys in sub array
- React TypeError: setAvailability is not a function
- How to kill a component state on a mouse event React JS
- How to remove the second x button, the left one inside a TextField inside a Autocomplete?
- Trying to deploy React App to Azure using a Github Actions workflow but getting an error in TypeScript
- making second api call after getting data from the first api
- React fixed-data-table: Uncaught TypeError: this._dataList.getSize is not a function
- Is there a way to get all data from a firestore database using useCollectionData()?
- Cannot read property 'tabsDivIframe' of undefined - React