Я проходил курс сокращения на egghead.io Дэна Абрамова, он создал поле ввода и назначил атрибут ref, который выглядит как функциональное назначение. Код выглядит следующим образом:
<input ref = {node => {input = node;}} />
<button onClick = {() => { input.value = ''}> ADD</button>
Не могли бы вы объяснить это, спасибо заранее!
🤔 А знаете ли вы, что...
HTML5 внедряет форматирование и стилизацию с помощью CSS3 для создания более привлекательных веб-страниц.
Это может помочь
const inputRef = React.useRef(null); // create ref of input using Hooks
<input ref = {inputRef} /> // render input field and assign ref to it
// render button and when click on it, it reassign the input value to empty
<button onClick = {() => { inputRef.current.value = '' } > ADD </button>
Эта функция называется callback refs. Если вы передадите функцию ref, она будет вызвана с элементом DOM в качестве аргумента, и вы сможете делать с ним все, что захотите. В вашем примере этот элемент присваивается переменной input.
Бывают случаи, когда вам нужно «убежать» от модели React и вам нужен доступ к базовым элементам DOM (например, для управления фокусом), и refs — это (?) способ сделать это.
Мы используем «ref», когда хотим получить доступ к объекту элемента dom. и это реагирующий способ получить объект dom.
Вы можете использовать традиционный способ получения объекта dom document.getElementById("inputId"), но проблема в том, что вам нужно использовать его в правильном жизненном цикле, иначе вы можете не получить элемент.
Еще одним преимуществом ссылки является то, что если компонент будет уничтожен, ваш объект ссылки также будет уничтожен.
Пример:
<input id = "inputId" ref = {node => {input = node;}} />
<button onClick = {() => { input.value = ''}> ADD</button>
console.info(input)
console.info(document.getElementById("inputId"))
Обе консоли будут указывать на один и тот же элемент dom
проверьте это для более подробной информации https://reactjs.org/docs/refs-and-the-dom.html