我尝试使用redux格式上传动态多图像文件。由于<input type="file" />
不支持设置值。我定义了名为FileInput
的函数
const FileInput = ({ input:{value: omitValue,...inputProps}, label, type,
meta: { touched, error, warning } }) => (
<div>
<input
type={type} {...inputProps} className='form-control'
/>
{touched && error && <span className="text-danger">{error}</span>}
</div>)
form.js
const Form = props => {
const { handleSubmit, pristine, reset, submitting} = props
return (
<form onSubmit={handleSubmit(handleProductInfo)} encType='multipart/form-data'>
<div className="form-group ">
<label>Thumbnail Image</label>
<Field name="thumbnailImage"
component={FileInput}
type="file"
/>
</div>
</form>
生成上传字段输入标记
const renderImageFeatures = ({ fields, meta: { error, submitFailed } }) => (
<div>
<button type="button" className="btn btn-success" onClick={() => fields.push({})}>
<i className="fa fa-plus-circle" aria-hidden="true"></i> Add Images
</button>
{submitFailed && error && <div className="text-danger">{error}</div>}
<ul className="featuresList">
{fields.map((imagefeatures, index) => (
<li key={index} className="col-md-2 my-2">
<button
type="button"
title="Remove Image"
className="btn btn-danger pull-right"
onClick={() => fields.remove(index)}
><i className="fa fa-trash" aria-hidden="true"></i>
</button>
<h5>Image #{index + 1}</h5>
<div className="form-group">
<Field name={`${imagefeatures}.image`}
component={FileInput}
type="file"
/>
</div>
</li>
))}
</ul>
</div>
)