В React ты можешь вызвать событие клика программно, используя refs для прямого доступа к DOM-элементу, а потом вызвав его метод click().
Используй атрибут ref, чтобы сохранить ссылку на DOM-элемент как свойство класса:
<input ref={input => this.inputElement = input} />
Или с современным React и useRef:
const inputRef = useRef(null);
<input ref={inputRef} />
Вызови метод click() на сохранённой ссылке из обработчика события или любой другой функции:
this.inputElement.click()
Или с хуками:
inputRef.current.click()
Вот практическая реализация:
class MyComponent extends React.Component {
handleButtonClick = () => {
this.inputElement.click();
}
render() {
return (
<>
<input ref={input => this.inputElement = input} type="file" />
<button onClick={this.handleButtonClick}>
Open File Dialog
</button>
</>
);
}
}
useRef в функциональныхclick() — это нативный метод DOM, доступный на всех интерактивных элементахВ React ты можешь программно вызвать событие клика, вызвав метод click() на ссылке DOM-элемента, полученной через ref.
Новый — ещё не проверен сообществом
Вы