onChange()不是一个函数。手动触发onChange()。

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>

- lucahuy

---

看起来你想在文件输入元素上触发点击事件以显示文件选择器。当你实际选择一个文件时，onChange才会触发。 - JConstantine

你是如何展示第一行代码的？ - Jose Rojas

可能是以编程方式设置type="file"输入HTML元素的值？的重复问题。 - rishat

可能是以编程方式触发“选择文件”对话框的重复问题。 - Oscar Franco

Answer 1

如果你在使用React，那么就不应该访问DOM来处理这些内容。React为你提供了一个API来获取你需要的东西。

你需要一个无控制组件。为了做到这一点，你可以使用一个引用。

我没有尝试过，但我认为你可以这样做。

在构造函数中创建引用。

this.inputRef = React.createRef();

然后将输入的ref属性分配给this.inputRef。

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

最近进行点击事件派发。

this.inputRef.current.click();

希望它能够正常运行

- Diogo Aleixo

Answer 2

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

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

使用这种方法的问题是事件将没有目标附加到它上面。

更改方法旨在提供控制输入值的接口，因此如果想更改输入附加的文件，则应该在状态中简单地更改其值。

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

- Jeremy Gottfried

Answer 3

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

如果你想要用另一个按钮显示文件选择器，可以看一下这个答案

请注意，出于安全原因，您需要在onClick函数中触发选择器，用户输入是必要的。

- Oscar Franco

---

为什么要点踩？至少这是我贴出来的问题的重复。 - Oscar Franco