Refs thường được dùng để trả về một tham chiếu tới 1 phần tử.

Hầu hết nên tránh sử dụng chúng trong các trường hợp, tuy nhiên chúng có thể hữu ích khi chúng ta cần truy cập trực tiếp vào phần tử DOM hoặc 1 component trong React.

Refs cho phép bạn truy cập trực tiếp vào phần tử DOM hoặc một phiên bản của thành phần.

Để sử dụng chúng, bạn thêm thuộc tính ref vào component có giá trị là một hàm callback sẽ nhận phần tử DOM bên dưới hoặc phiên bản được gắn kết của component làm đối số đầu tiên của nó.

class UnControlledForm extends Component {
    handleSubmit = () => {
        console.log('Input Value: ', this.input.value);
    };
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="text" ref={(input) => (this.input = input)} />
                <button type="submit">Submit</button>
            </form>
        );
    }
}

Ở trên lưu ý rằng trường đầu vào của chúng ta có thuộc tính ref có giá trị là một hàm. Hàm đó nhận phần tử DOM thực tế của đầu vào mà sau đó chúng ta đặt trên component để có quyền truy cập vào nó bên trong hàm handleSubmit.

Người ta thường hiểu sai rằng bạn cần sử dụng một class component để sử dụng refs, nhưng refs cũng có thể được sử dụng với các functional component bằng cách tận dụng các bao đóng (leveraging closures) trong JavaScript.

function CustomForm({ handleSubmit }) {
    let inputElement;
    return (
        <form onSubmit={() => handleSubmit(inputElement.value)}>
            <input type="text" ref={(input) => (inputElement = input)} />
            <button type="submit">Submit</button>
        </form>
    );
}