Se você estiver usando o React 16.3+, a maneira sugerida de criar referências é usar React.createRef()
.
class TestApp extends React.Component<AppProps, AppState> {
private stepInput: React.RefObject<HTMLInputElement>;
constructor(props) {
super(props);
this.stepInput = React.createRef();
}
render() {
return <input type="text" ref={this.stepInput} />;
}
}
Quando o componente é montado, a propriedade ref
do atributo current
será atribuída ao componente / elemento DOM referenciado e atribuída de volta null
quando ele desmontar. Por exemplo, você pode acessá-lo usandothis.stepInput.current
.
Para RefObject
saber mais , consulte a resposta de @ apieceofbart ou o PR createRef()
foi adicionado.
Se você estiver usando uma versão anterior do React (<16.3) ou precisar de um controle mais refinado sobre quando as refs estão definidas e desabilitadas, você pode usar "refs de retorno de chamada" .
class TestApp extends React.Component<AppProps, AppState> {
private stepInput: HTMLInputElement;
constructor(props) {
super(props);
this.stepInput = null;
this.setStepInputRef = element => {
this.stepInput = element;
};
}
render() {
return <input type="text" ref={this.setStepInputRef} />
}
}
Quando o componente é montado, o React chama o ref
retorno de chamada com o elemento DOM e o chama null
quando desmonta. Por exemplo, você pode acessá-lo simplesmente usandothis.stepInput
.
Ao definir o ref
retorno de chamada como um método vinculado na classe, em oposição a uma função embutida (como em uma versão anterior desta resposta), você pode evitar que o retorno de chamada seja chamado duas vezes durante as atualizações.
Não costumava ser uma API onde o ref
atributo foi uma string (ver resposta de Akshar Patel ), mas devido a algumas questões , refs cordas são fortemente desencorajados e eventualmente será removido.
Editado em 22 de maio de 2018 para adicionar a nova maneira de fazer refs no React 16.3. Obrigado @apieceofbart por apontar que havia uma nova maneira.
refs
atributo class serão descontinuados nas próximas versões do React.