调用redux-form的React组件方法
Calling React component method of redux-form
有没有办法访问redux-form的组件方法。我希望我的上传按钮提交表单,如果用户没有 select 任何文件,那么我将打开文件 select 对话框。
我的代码
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)
希望您已找到解决方案,如果没有,这里有一个解决方案,
字符串引用已弃用,您应该使用函数回调,
ref 接受一个回调函数,您可以通过该回调函数将 setter 函数传递给子项 (setDropZoneRef)
在父项中设置 dropzoneref
这是相同的代码
上传模式
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>
);
}
}
表格
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)
有没有办法访问redux-form的组件方法。我希望我的上传按钮提交表单,如果用户没有 select 任何文件,那么我将打开文件 select 对话框。
我的代码
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)
希望您已找到解决方案,如果没有,这里有一个解决方案, 字符串引用已弃用,您应该使用函数回调,
ref 接受一个回调函数,您可以通过该回调函数将 setter 函数传递给子项 (setDropZoneRef)
在父项中设置 dropzoneref这是相同的代码
上传模式
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>
);
}
}
表格
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)