Как использовать ссылки в React

class MyComponent extends React.Component {
 
    state = {value: ""};
 
    handleChange = e => this.setState({value: e.target.value});
 
    render() {
        return (
            <div>
                <h1>Hello World!</h1>
                <input
                    onChange={this.handleChange}
                    value={this.state.value} />
            </div>
        );
    }
 
};

Внутри React транспилирует JSX, чтобы выяснить, как манипулировать DOM. Он будет использовать функции браузера, такие как document.createElement() и document.appendChild(), для создания объявленной вами структуры DOM.

Это значительно упрощает код, необходимый для программного обновления DOM. Чтобы изменить элементы, вы меняете их реквизиты или обновляете состояние компонента. Затем React вычисляет различия и вносит необходимые корректировки в DOM.

Дело для рефов

Обычно у вас нет доступа к узлам DOM, созданным React. В приведенном выше примере у нас нет дескриптора созданных нами элементов. Это становится проблематичным, если вы хотите вызвать DOM API, к которому нельзя получить декларативный доступ через реквизиты React.

Давайте рассмотрим, что произойдет, если пользователь введет недопустимое значение в текстовый ввод. Если бы они затем нажали «Отправить» в реальной форме, было бы неплохо показать сообщение об ошибке и вернуть фокус на текстовый ввод. Вы не можете сделать это без доступа к входному узлу DOM. Вам нужно вызвать метод focus() для этого элемента.

Введите реф. Ссылки дают вам первоклассный способ получить «ссылку» на узлы DOM React. Вы можете решить проблему с фокусом, назначив ссылку на вход. Ссылки — это объекты со свойством current, содержащим узел DOM, на который они ссылаются.

Создание ссылки

Ссылки обычно создаются явным образом с помощью вызова React.createRef(). Затем вы назначаете их экземпляру компонента, используя специальную опору ref. Это не настоящая опора, и компонент не может получить к ней доступ.

class DemoComponent extends React.Component {
 
    inputRef = React.createRef();
 
    focusInput = () => this.inputRef?.current.focus();
 
    render() {
        return (
            <div>
                <input ref={this.inputRef} />
                <button onClick={this.focusInput} />
            </div>
        );
    }
 
}

class View extends React.Component {
 
    state = {
        error: true;    // Example!
    };
 
    formRef = React.createRef();
 
    focusForm = () => this.formRef?.current.focusInput();
 
    submit = () => {
        if (this.state.error) {
            alert("There was an error; check your input.");
            this.focusForm();
        }
    };
 
    render() {
        return (
            <div>
                <Form ref={this.formRef} />
                <Button onClick={this.submit} />
            </div>
        );
    }
 
}
 
class Form extends React.Component {
 
    inputRef = React.createRef();
 
    focusInput() {
        this.inputRef.current?.focus();
    }
 
    render() {
        return <input ref={this.inputRef} />
    }
}

const InputComponent = React.forwardRef((props, ref) => (
    <input ref={ref} value={props.value} />
));

const InputComponent = props => {
    const ref = useRef();
    return <input ref={ref} value={props.value} />
};

class CallbackRef extends React.Component {
    render() {
        return <input ref={el => this.inputRef = el} />
    }
}