url - 如何使用 Redux Form 获取要作为数据插入的 url？

Question

我能够在附件字段中获取 url，但是对于 redux 表单它是空的，如何将 url 的值传递给 redux 表单？下面是代码和截图：

<div className="FileUpload">
   <Dropzone
     onDrop={this.onImageDrop.bind(this)}
     multiple={false}
     accept="image/*">
<div>Drop an image or click to select a file to upload.</div>
   </Dropzone>
</div>
   <div className="form-group">
     <label htmlFor="attachment">Attachment:</label><br />
       <input className="form-control" focus placeholder="attachment" type="text" name="attachment" ref="attachment" value={this.state.uploadedFileCloudinaryUrl} />
        {this.state.uploadedFileCloudinaryUrl === '' ? null :
        <div>
          <p>{this.state.uploadedFile.name}</p>
            <img src={this.state.uploadedFileCloudinaryUrl} alt="" />            
        </div>}
        </div>
        <div className="ui small image">
          <img src={this.props.workrequest.attachment} alt="" />
        </div>

附件字段中的 url

第一个是使用 React Dropzone 来获取 url，但对于 Redux Form，它是空的。我可以知道如何在此处获取 Redux Form 的 url 插入吗？谢谢

Answer 1

实际上，您必须使用 Redux-form 中的 Field 组件。否则，您可以使用 dispatch 和 change action creator 更改表单值。

import { Field, change } from 'redux-form';

this.props.dispatch(change('uploadForm', 'url', this.state.url));

Answer 2

import React from 'React';
import { connect } from 'react-redux';
import { change, reduxForm } from 'redux-form';
import Dropzone from 'react-dropzone';

class UploadForm extends React.Component {
  onDrop = (accepted) => {
    if (!accepted.length) return;

    // start uploading
    this.setState({ isUploading: true });

    const formData = new FormData();
    formData.append('file', accepted[0]);

    axios.post('upload', formData).then(
      (res) => {
        this.props.dispatch(change('uploadForm', 'url', res.url));
        this.setState({ isUploading: false });
      },
      () => {
        this.setState({ isUploading: false });
      }
    );
  };

  render() {
    return (
      <form>
        <Dropzone onDrop={this.onDrop} />
      </form>
    );
  }
}

export default connect()(
  reduxForm({
    form: 'uploadForm',
    initialValues: {
      url: ''
    }
  })(UploadForm)
);

请使用这个。