Wie bekomme ich die URL als Daten mit Redux Form einfügen?

Question

Ich konnte die URL im Anhang Feld, aber für die Redux-Form war es leer, wie ist es möglich, den Wert der URL auf die Redux-Form übergeben? Unten ist der Code und die Screenshot:

<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

Die erste die Reaktion Dropzone wird mit der URL zu erhalten, aber für das Redux Formular es war leer. Darf ich wissen, wie man das macht, um die URL-Einsätze bei Redux Form hier zu bekommen? Danke

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

diese Bitte verwenden.

Answer 2

Eigentlich müssen Sie Feldkomponente von Redux-Form verwenden. Ansonsten können Sie die Formularwerte mit Versand ändern und Aktionsersteller ändern.

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

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