Используйте ссылки в React для создания компонента загрузки

В этой главе вы научитесь использовать ссылки в React. К концу этой главы вы сможете использовать ссылки в существующем приложении таким образом, чтобы это было эффективно и просто.

В React мы используем Refs для прямого доступа, управления и взаимодействия с DOM. Прямые ссылки на элементы HTML позволяют нам выполнять задачи, которые обычно встречаются при создании клиентских приложений. Эти задачи включают, но не ограничиваются, манипулирование данными и анализ макета.

Мы будем использовать Ref для создания стилизованной кнопки ввода, которую нельзя было стилизовать с помощью простого CSS. Сначала мы создадим ввод файла, а затем добавим компонент настраиваемой кнопки. При нажатии кнопки запускается функция загрузки файла ввода.

Создайте новый проект с помощью create-react-app CLI:

$ npx create-react-app button-refs

2. Заходим в папку и запускаем create-react-app сервер разработки:

cd button-refs && npm start

3. В файле проекта editsrc/App.js измените компонент App, чтобы он возвращал компонент input:

const App = () => {
  return (
    <input />
  );
}
export default App;

4. Добавьте тип файла в компонент input:

const App = () => {
  return (
    <input type="file" />
  );
}
export default App;

Запустите приложение на http://localhost:3000, мы должны увидеть следующий результат:

Если вы нажмете эту кнопку ввода, вы должны увидеть всплывающее окно для выбора файла для загрузки.

5. Добавьте компонент button со стилями для оранжевого фона и белого цвета шрифта. Добавьте скрытый атрибут, чтобы скрыть собственный входной файл.

const App = () => {
  return (
    <>
      <input type="file" hidden={true} />
      <button style={{ backgroundColor: "orange", color: "white" }}>
        Upload
      </button>
    </>
  );
}
export default App;

6. Начните с создания поля класса с именем inputRef для хранения Ref:

const App = () => {
  inputRef;
  return (
    <>
      <input type="file" hidden={true} />
      <button style={{ backgroundColor: "orange", color: "white" }}>
        Upload
      </button>
    </>
  );
}
export default App;

7. Создайте встроенную функцию, которая принимает параметр с именем refParam, и назначьте этот параметр полю inputRef компонента App.

const App = () => {
  let inputRef;
  return (
    <>
      <input
        type="file"
        hidden={true}
        ref={refParam => inputRef = refParam}
      />
      <button style={{ backgroundColor: "orange", color: "white" }}>
        Upload
      </button>
    </>
  );
}
export default App;

8. На последнем шаге добавьте к кнопке обработчик onClick. Если вы нажмете кнопку, будет вызвана функция щелчка на inputRef, ссылка на поле для компонента ввода:

const App = () => {
  let inputRef;
  return (
    <>
      <input
        type="file"
        hidden={true}
        ref={refParam => inputRef = refParam}
      />
      <button
        style={{ backgroundColor: "orange", color: "white" }}
        onClick={() => inputRef.click()}
      >
        Upload
      </button>
    </>
  );
}
export default App;

Попробуем загрузить:

Теперь нажмите кнопку, и вам будет предложено загрузить файл, потому что настраиваемая кнопка теперь запускает собственные функции ввода файла.

Вы использовали React Ref для привязки функциональности нативного ввода, который трудно настраивать, к компоненту кнопки, который вы можете стилизовать по своему усмотрению. В частности, мы проверим функцию, которая была передана как объект ссылки входному компоненту.

URL репо: https://github.com/easywebsify/button-refs

Используйте ссылки в React для создания компонента загрузки

Вопросы по теме