Содержание статьи
Публиковать данные в API никогда не было легко. Но использовали ли вы когда-нибудь React для публикации данных формы в Google Таблицах? Если нет, то это руководство для вас.
Сегодня мы поговорим о том, как передать данные формы из React в Google Sheets, как REST API.
Сначала создайте свое приложение React.
Чтобы начать, вы можете использовать create-react-app, чтобы настроить приложение React.
Просто введите npx create-react-app react-googlesheets чтобы настроить каталог проекта.
Как установить семантический пользовательский интерфейс
Семантический пользовательский интерфейс — это фреймворк, который используется для проектирования и разработки красивых и отзывчивых макетов. Он имеет компоненты для кнопок, контейнеров, списков, входов и многое другое.
Чтобы установить семантический пользовательский интерфейс в программе React, воспользуйтесь следующей командой:
npm install semantic-ui-react semantic-ui-cssПосле завершения установки откройте файл index.js и импортируйте следующее:
import 'semantic-ui-css/semantic.min.css'Теперь запустите программу с помощью команды npm start.
Давайте создадим несколько полей ввода
Давайте создадим форму и поля ввода, чтобы получить такие данные, как имя, возраст, зарплата и хобби из нашей программы React.
Здесь мы импортируем кнопки, форму, контейнер и заголовок из semantic-ui-react библиотека и создание полей формы.
import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';
export default class App extends Component {
render() {
return (
<Container fluid className="container">
<Header as="h2">React Google Sheets!</Header>
<Form className="form">
<Form.Field>
<label>Name</label>
<input placeholder="Enter your name" />
</Form.Field>
<Form.Field>
<label>Age</label>
<input placeholder="Enter your age" />
</Form.Field>
<Form.Field>
<label>Salary</label>
<input placeholder="Enter your salary" />
</Form.Field>
<Form.Field>
<label>Hobby</label>
<input placeholder="Enter your hobby" />
</Form.Field>
<Button color="blue" type="submit">Submit</Button>
</Form>
</Container>
)
}
}
.form{
width: 500px;
}
.container{
padding:20px
}Вот как это будет выглядеть:
Теперь мы кончили с UI. Добавим немного функций.
Прежде всего, давайте создадим состояния для наших четырех полей формы в конструкторе.
import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
name: '',
age: '',
salary: '',
hobby: ''
}
}
changeHandler = (e) => {
this.setState({[e.target.name] : e.target.value})
}
submitHandler = e => {
e.preventDefault();
console.log(this.state);
}
render() {
const { name, age, salary, hobby } = this.state; (*)
return (
<Container fluid className="container">
<Header as="h2">React Google Sheets!</Header>
<Form className="form" onSubmit={this.submitHandler}>
<Form.Field>
<label>Name</label>
<input placeholder="Enter your name" type="text" name = "name" value = {name} onChange={this.changeHandler}/>
</Form.Field>
<Form.Field>
<label>Age</label>
<input placeholder="Enter your age" type="number" name = "age" value = {age} onChange={this.changeHandler}/>
</Form.Field>
<Form.Field>
<label>Salary</label>
<input placeholder="Enter your salary" type="number" name = "salary" value = {salary} onChange={this.changeHandler}/>
</Form.Field>
<Form.Field>
<label>Hobby</label>
<input placeholder="Enter your hobby" type="text" name = "hobby" value = {hobby} onChange={this.changeHandler}/>
</Form.Field>
<Button color="blue" type="submit">Submit</Button>
</Form>
</Container>
)
}
}
Здесь у нас есть четыре поля формы и их соответствующие состояния. У нас также есть метод changeHandler для отслеживания изменений во входных значениях.
Давайте деструктурируем состояния в методе render и добавим их значение в атрибут value входов (строка*).
Последнее, что нам нужно это обработчик onSubmit. В тег формы добавьте событие onSubmit и назначьте метод submitHandler.
Заполните форму и нажмите кнопку «Отправить». Вы вводите данные в консоли.
И все – у нас есть форма, которая берет имя, возраст, зарплату и хобби и регистрирует их в консоли.
Как опубликовать данные в Google Таблицах
Давайте превратим наши таблицы Google в REST API.
Мы будем публиковать данные в Google Sheets как REST API, и для этого нам нужно установить Axios. Это библиотека, которую вы можете использовать для отправки запросов в API получить
Откройте новую электронную таблицу, нажав «Файл», затем «Создать» и «Электронная таблица».
Назовите лист по своему выбору и сохраните.
Нажмите кнопку «Поделиться» в правом верхнем углу экрана и отредактируйте доступ к общему доступу.
Скопируйте ссылки и перейдите к и создайте свою бесплатную учетную запись.
Создайте новое соединение и вставьте скопированный URL-адрес из Google Таблиц в поле URL-адреса подключения.
Нажмите на соединение. Вы будете перенаправлены на страницу подключений. Здесь можно увидеть все свои связи. Нажмите на подробности нового подключения.
Скопируйте URL-адрес ПОДКЛЮЧЕНИЕ. Этот URL-адрес будет использоваться как конечная точка для отправки запросов POST.
Теперь давайте установим Axios. Тип npm install axios в терминале, чтобы установить пакет.
После установки импортируйте его в верхней части файла. Мы запросим POST в функции submitHandler.
submitHandler = e => {
e.preventDefault();
console.log(this.state);
axios.post('url', this.state)
.then(response => {
console.log(response);
})
}Замените функцию submitHandler кодом выше. Здесь мы используем Axios для размещения данных на URL и получения ответа на консоли с помощью .потом ключевое слово.
Вставьте скопированный URL-адрес CONNECTION конечная точка от письмо. и замените его URL-адресом в axios.post(‘url’).
submitHandler = e => {
e.preventDefault();
console.log(this.state);
axios.post('api/sheets/a6e67deb-2f00-43c3-89d3-b331341d53ed', this.state)
.then(response => {
console.log(response);
})
}Теперь откройте Google Таблицы и заполните первые столбцы, то есть имя, возраст, зарплату и хобби. Заполните их внимательно, иначе это не сработает. Он должен быть чувствительным к регистру.
Запустите программу React и заполните поля ввода. Вы увидите, что данные заполняются в вашей Таблице Google одна за другой.
Это все, уважаемые. Теперь вы знаете, как преобразовать Таблицы Google в REST API. Теперь вы храните свои данные в Google Таблицах с помощью программы React.
Кроме того, вы можете найти код Github для эксперимента.
Вы также можете просмотреть этот учебник по моему каналу YouTube, если хотите.
Счастливого обучения.