Как вызвать мутатор setFieldTouched с использованием компонента Reaction-Dropzone в окончательной форме React - PullRequest
Новая
       50

Как вызвать мутатор setFieldTouched с использованием компонента Reaction-Dropzone в окончательной форме React

0 голосов
/ 17 марта 2020

Я использую React Final Form с react-dropzone.

Я могу осуществить загрузку в браузере на S3. Моя проблема заключается в следующем:

Когда я успешно загружаю на S3, я хочу обновить модель формы. Я могу вручную запустить обновление. Однако я использую автосохранение, которое прослушивает поля, которые были touched.

Я пытался использовать мутатор setFieldTouched для искусственного запуска автосохранения. Однако, как вы увидите в коде, либо этот код настроен неправильно, либо никогда не запускается.

Соответствующий код:

AdminForm.jsx

import { Form, Field, FormSpy } from 'react-final-form';
import setFieldTouched from 'final-form-set-field-touched';
import Dropzone from '../Dropzone/Dropzone';


render() {
    return (
      <div className="column content is-two-thirds-tablet is-full-mobile">
        <Form
          onSubmit={onSubmit}
          initialValues={
            {
              ...this.props.formData,
            }
          }
          mutators={{setFieldTouched}}
          render={({
             form, handleSubmit, pristine, invalid, submitting, values,
          }) => (
              <div className="form">
                {/* Autosave */}
                <Autosave debounce={1000} save={this.save} />


                {/* Media management */}
                <div className="box">
                  <Field name="attachment" >
                    {props => (
                      <div>
                        <Dropzone {...props.input} 
                                  mutators={form.mutators} 
                                  onChange={ file => { values.attachment.push(file[0]); }} />
                      </div>
                    )}
                  </Field>

                </div>

                {/* Global Form controls */}
                <div className="field is-grouped">
                  <div className="control">
                    <button className="button is-link"
                      onClick={() => this.props.updatePost(values)}
                      disabled={submitting || pristine}
                    >Save Topic</button>
                  </div>
                  <div className="control">
                    <button className="button is-link"
                      disabled={submitting || pristine}
                    >Save As Draft</button>
                  </div>
                  <div className="control">
                    <button className="button is-link is-danger">Delete Post</button>
                  </div>
                </div>
              </div>
            )} />
      </div>);
  }
}

Dropzone.jsx соответствующие биты. 

onDrop: acceptedFiles => {
            console.log(props)
            assetsAPICall({
                callURIAction: 'upload',
                callMethod: 'post',
                file: acceptedFiles,
            }).then((uploadResult) => {
                S3Object = {
                    url: uploadResult.data[0].service.endpoint.href + uploadResult.data[0].service.config.params.Bucket + '/' + uploadResult.data[0].service.config.params.Key,
                    name: uploadResult.data[0].service.config.params.Key,
                };
                let files = acceptedFiles.map(file => {
                    return _.assign(S3Object, { size: file.size });
                });
                setFiles(files);

                if (props.onChange) {
                    console.log("changed");
                    props.onChange(files);
                    props.mutators.setFieldTouched('attachment', true); // <- not working :(
                }
            });

        }

, где attachment - массив объектов в модели формы: 

"attachment": [
    {
      "_id": "5ac50ccc97a40c001eb6567d",
      "name": "l.jpg",
      "url": "https://s3.amazonaws.com/l.jpg",
      "size": 41662,
      "date_created": "2018-04-04T17:34:52.126Z"
    },
    {
      "_id": "5e64953bb42e3700128ab970",
      "url": "https://s3.amazonaws.com/x.jpg",
      "size": 5242880,
      "name": "enfamil.jpg"
    },
    {
      "url": "https://s3.amazonaws.com/p.JPG",
      "name": "p.JPG",
      "size": 203902
    }
  ],

Может кто-нибудь помочь мне понять, что мне нужно исправить?

...