調用 redux-form 的 React 組件方法

Question

無論如何可以訪問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>
        )
    }
}

表單.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)

Answer 1

希望您找到了解決方案，如果不是這里的解決方案，則不推薦使用字符串引用，您應該使用 function 回調，

ref 接受一個回調 function 通過它您可以通過將設置器 function 傳遞給子級（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)