Вызов метода React для компонента redux-формы - PullRequest
Новая
       12

Вызов метода React для компонента redux-формы

1 голос
/ 21 апреля 2020

Есть ли в любом случае доступ к методу компонента из формы-редукса. Я хочу, чтобы кнопка загрузки отправила форму, а также, если пользователь еще не выбрал файл, я открою диалоговое окно выбора файла.

Мой код

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)

1 Ответ

1 голос
/ 23 апреля 2020

Надеюсь, что вы нашли решение, если не здесь, решение, строковые ссылки устарели, и вы должны использовать обратные вызовы функций,

ref принимает функцию обратного вызова, с помощью которой вы можете установить dropzoneref в родительском элементе с помощью Передача функции сеттера дочернему элементу (setDropZoneRef)

Вот код для того же

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>
    );
  }
}

Форма 

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