Możesz użyć właściwości, ref
aby uzyskać odwołanie do bazowego obiektu HTMLInputElement za pomocą wywołania zwrotnego, zapisać odwołanie jako właściwość klasy, a następnie użyć tego odwołania, aby później wywołać kliknięcie ze swoich programów obsługi zdarzeń za pomocą HTMLElement.click metody .
W Twojej render
metodzie:
<input ref={input => this.inputElement = input} ... />
W programie obsługi zdarzeń:
this.inputElement.click();
Pełny przykład:
class MyComponent extends React.Component {
render() {
return (
<div onClick={this.handleClick}>
<input ref={input => this.inputElement = input} />
</div>
);
}
handleClick = (e) => {
this.inputElement.click();
}
}
Zwróć uwagę na funkcję strzałki ES6, która zapewnia prawidłowy zakres leksykalny this
w wywołaniu zwrotnym. Zauważ również, że obiekt, który zdobędziesz w ten sposób, jest obiektem podobnym do tego, co byś uzyskał używając document.getElementById
, tj. Rzeczywisty węzeł DOM.