Question

我已经在我的React JS项目中安装了react-file-base64并且已经实现了它：

import FileBase64 from 'react-file-base64';
import FileUpload from '../../forms/FileUpload'

...

class MyComponent extends Component {
    render() {
        return (
            <FileUpload buttonText='Upload New Image'>
                <FileBase64
                    multiple={ false }
                    onDone={ this.changeProfileImage }
                />
            </FileUpload>
        )
    }
}

为简洁起见，代码显然是浓缩的。

正如您所看到的，我已将FileBase64组件包装在自定义FileUpload组件中 - 执行旧的JS / CSS技巧，隐藏文件上载并通过不同的方式触发它按下按钮。

鉴于我不可以直接访问编辑FileBase64组件，因为它已由NPM安装（并且将来可能会更新），并且它是不是直接输入元素，而是呈现的自定义组件 - 如何触发{{1>呈现的输入元素上的单击我的FileBase64组件内部的组件？

Answer 1

您有几个选择。

使用react-file-base64重新考虑

这是一个非常小的NPM模块，所以问问自己：是否值得使用几十行其他人的代码而不是自己编写功能？开源是惊人的，利用其他人的工作可以成为一个救星，但学会识别何时依靠它，什么时候不去。

Fork react-file-base64

分叉原始项目并添加满足您要求所需的任何功能。理想情况下，这是以一种编写良好，记录良好的方式进行的，以便您以后可以打开拉取请求并以有意义的方式回馈项目。

哈哈一点

尽可能多地留在React内部是件好事，但有很多方法可以解决它。例如，您仍然可以使用普通的旧JavaScript来选择DOM元素。记得那些东西？ ; P

这可能会正常工作 - 将<FileBase64 />组件包装在<div>中，您可以使用它来选择任何嵌套的子<input>元素。

class MyComponent extends Component {
    ...
    onBtnClick() {
        this.inputWrapper.getElementsByTagName("input")[0].click();
    }
    render() {
        return (
            <FileUpload buttonText='Upload New Image' callback={this.onBtnClick} >
                <div ref={(el) => this.inputWrapper = el} >
                    <FileBase64
                        multiple={ false }
                        onDone={ this.changeProfileImage }
                    />
                </div>
            </FileUpload>
        )
    }
}

我不知道你是如何处理<FileUpload />点击回调的，但你明白了。在组件呈现之后，其DOM元素将被裸露以供您访问。诀窍在于弄清楚如何首先选择这些元素，并注意不要在这个过程中破坏React。但选择一个元素并触发“点击”事件是非常温和的。

Answer 2

此组件有多个触发器可能适合您的需要。其中一些是：

beforeUpload ：在上传之前触发。返回true表示继续或false表示停止上传。
doUpload ：发送请求后触发（xhr发送|表单提交）。
onabort ：在您中止xhr后出现问题。
uploadSuccess ：上传成功后的回调（根据AJAX简单）。

如果您看到plugin documentation，您可以详细了解它们的工作方式，以及与FileUpload组件中的输入元素进行交互的更多不同事件。

如何触发子组件内部元素的点击（我无法访问）？

2 个答案: