Question

我有一个文件选择器，当单击按钮时，文件选择器出现：

<input id='example' type="file" accept="image/*" onChange={this.onImageChange} />

现在我要使用另一个按钮来执行此操作，触发上面的输入：

<button onClick={() => {
    var element = document.getElementById('example');

    console.log(element) // This shows <input id="example" type="file" accept="image/*">

    // element.onChange() // Error: onChange() is not a function

    // Above doesn't work, so I try to trigger the onChange event manually,
    // but below doesn't do anything
    var event = new Event('change');
    element.dispatchEvent(event);
}}></button>

Answer 1

如果这是反应，则不应访问此类内容的Dom。他们有一个Api可以满足您的需求。

您需要一个不受控制的组件。为此，您可以使用一个参考。

我还没有尝试过，但是我认为你可以做到。

在构造函数上创建引用

this.inputRef = React.createRef();

然后将输入引用道具分配给this.inputRef

<input ref={this.inputRef} id='example' type="file" accept="image/*" onChange={this.onImageChange} />

并最近分发点击。

this.inputRef.current.click();

希望它能起作用

Answer 2

element.onChange不是方法，因为您的onChange函数存储在您的react Component类中，并通过React的合成事件发射器委托。它是React.createElement('input')的属性，但不是实际DOM元素的属性。

要调用React元素的onChange方法，可以直接调用它，例如 this.onChange(event)。

该方法的问题在于您的活动将没有附加目标。

change方法旨在提供用于控制输入值的接口，因此，如果要更改附加到输入的文件，则只需更改其状态值即可。

this.setState({file: this.alternateFile})

Answer 3

onChange函数是选择文件后的回调。

如果您想要通过另一个按钮显示文件选择器，则可以查看此answer

请记住，由于安全原因，您需要在onClick函数上触发选择器，因此用户输入是必需的。

onChange（）不是函数。手动触发onChange（）

3 个答案: