Reduxフォームでデータとして挿入するURLを取得する方法は？

Question

私は添付ファイルのフィールドにURLを取得することができましたが、reduxフォームは空でしたので、どのようにreduxフォームにURLの値を渡すことが可能ですか？最初のものは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> 

the url in the attachemnt field

：以下のコードとスクリーンショットです。 ReduxフォームにURLを挿入する方法を知っていますか？ありがとうございます

Answer 1

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

これを使用してください。

Answer 2

実際には、Redux形式のフィールドコンポーネントを使用する必要があります。 他の方法として、ディスパッチとアクション作成者を使用してフォームの値を変更することができます。

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

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