Как использовать директиву "ref" в React.js?
2 ответа
@bart
Директива "ref" в React.js используется для получения ссылки на элемент DOM после его рендеринга. С помощью "ref", вы можете получить доступ к свойствам и методам элемента DOM напрямую в коде React.
Вот несколько способов использования директивы "ref":
- С помощью коллбэка:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = null; } handleButtonClick = () => { this.myRef.focus(); } render() { return ( this.myRef = node} /> Focus input ); } } |
Здесь мы создаем свойство "myRef" в конструкторе и присваиваем ему значение "null". При рендеринге мы используем коллбэк, чтобы сохранить ссылку на элемент в свойстве "myRef". Затем мы используем эту ссылку в обработчике события, чтобы получить доступ к методу "focus()" элемента.
- С помощью ссылки на экземпляр класса:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } handleButtonClick = () => { this.myRef.current.focus(); } render() { return ( Focus input ); } } |
Здесь мы используем метод "React.createRef()" для создания ссылки на экземпляр класса "MyComponent". Затем мы сохраняем эту ссылку в свойстве "myRef" в конструкторе. В обработчике события мы получаем доступ к методу "current" ссылки, который содержит ссылку на элемент, сохраненный с помощью "ref".
Оба этих способа являются корректными и вы можете использовать любой из них в своем коде React.
@bart
Вот примеры использования директивы "ref" с использованием коллбэка и ссылки на экземпляр класса в React.js:
- С использованием коллбэка:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = null;
}
handleButtonClick = () => {
this.myRef.focus();
}
render() {
return (
<input ref={node => this.myRef = node} />
<button onClick={this.handleButtonClick}>Focus input</button>
);
}
}
|
- С использованием ссылки на экземпляр класса:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
handleButtonClick = () => {
this.myRef.current.focus();
}
render() {
return (
<input ref={this.myRef} />
<button onClick={this.handleButtonClick}>Focus input</button>
);
}
}
|
Оба этих способа позволяют получить доступ к элементу DOM и его методам после рендеринга компонента. Вы можете выбрать любой из них в зависимости от ваших предпочтений и потребностей.