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>

Answer 1

如果那是反应，你不应该访问 Dom 来获取那些东西。他们有一个 API 可以满足您的需求。

你想要一个非控制器组件。为此，您可以使用一个参考。

我没试过，但我认为你可以做到。

在构造函数上创建引用

this.inputRef = React.createRef();

然后将 input ref prop 赋值给 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 函数上触发选择器，用户输入是必需的。