React，redux 形式的图片预览答案

【问题标题】：React, redux-form image previewReact，redux 形式的图片预览
【发布时间】：2016-10-26 19:13:13
【问题描述】：

我正在使用带有 Redux-Form 的 React，并且我正在尝试在文件输入中显示图像的预览。我设法预览了图像，但是只有在选择文件后将焦点从文件输入中更改出来时，图像才会预览（而不是在选择文件后立即预览）。

这是我采取的方法：

<div className="form-group">
    <label htmlFor="exampleInputFile" style={{ width: '100%' }}>
        <img id="team-logo-img" className="img-responsive center-block" src="http://placehold.it/180" />
        {this.renderImagePreview()}
    </label>
    <input type="file" id="exampleInputFile" {...teamLogoField} value={null} onChange={this.readURL(this)} />
</div>

还有我的 readURL 函数：

readURL(input) {

    input = input.props.fields.teamLogoField.value;

    if (input && input[0]) {
        const reader = new FileReader();

        reader.onloadend = function (e) {
            jQuery('#team-logo-img')
            .attr('src', e.target.result);
        };

        reader.readAsDataURL(input[0]);
    }
}

有什么方法可以在用户选择文件后立即预览图像？或者如果有更好的方法来使用我正在听的 react redux-forms 预览图像！

================================================ ========================== 编辑1：

我使用的方法是基于此： https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

在不使用 react 时对我有用

【问题讨论】：

标签： reactjs redux react-redux redux-form

【解决方案1】：

好的，我找到了解决方案：我将 readURL 函数更新为：

updatePreview(event, teamLogoField) {
    const reader = new FileReader();

    reader.onload = (e) => {
        $('#team-logo-img').attr('src', e.target.result);
     };

    reader.readAsDataURL(event.target.files[0]);
    teamLogoField.onChange(event);
}

并在 onChange 句柄或输入上调用它，如下所示：

onChange={ (event) => {this.updatePreview(event , teamLogoField)} }

我相信这是在表单中预览图像的简便方法，但正如我之前所说：如果有人对此有更好的方法，我正在倾听！

================================================ ============================== 编辑 1

看起来你必须将 redux-form 字段对象传递给 onChange 处理程序来调用 redux-form 自己的 onChange 以便可以更新你的字段的新状态

================================================ ============================== 编辑 2

我发现了一种更反应的方法来做到这一点，在我的 IMG 元素中，y 将 src 设置为我的组件状态中的变量，并且在我的 updatePreview 函数中，在 onload 块中我更新了变量的值，你就完成了！

【讨论】：