前端毛小悠
前端毛小悠

翻译 | 《JavaScript Everywhere》第16章 创建，读取，更新和删除操作

翻译 | 《JavaScript Everywhere》第16章 创建，读取，更新和删除操作

写在最前面

大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。

为了提高大家的阅读体验，对语句的结构和内容略有调整。如果发现本文中有存在瑕疵的地方，或者你有任何意见或者建议，可以在评论区留言，或者加我的微信：code_maomao，欢迎相互沟通交流学习。

(σﾟ∀ﾟ)σ..:*☆哎哟不错哦

第16章 创建，读取，更新和删除操作

我喜欢纸质笔记本，几乎一直都随身携带着。通常，它们相对便宜，我很快就写满了临时的想法。不久前，我购买了价格更高的精装本笔记本，上面有精美的封面和精美的纸本。购买时，我对笔记本中将要出现的草图和计划抱有很大的野心，但是它在我的办公桌上呆了几个月。最终，我将其放在架子上，回到了我的标准笔记本电脑品牌。

就像我的笔记本一样，我们的应用仅在用户能够使用时才有用。你可能会从我们的API开发中回想起Notedly应用程序是一个“ CRUD”（创建，读取，更新和删除）应用程序。经过身份验证的用户可以创建新笔记、阅读笔记、更新笔记的内容或笔记作为收藏夹的状态以及删除笔记。在本章中，我们将在Web用户界面中实现所有这些功能。为了完成这些任务，我们将编写GraphQL请求和查询。

创建新笔记

当前，我们可以查看笔记，但无法创建笔记。这类似于没有笔的笔记本。让我们为用户添加创建新笔记的功能。我们将通过创建一个用户可以在其中写笔记的textarea形式。

当用户提交表单时，我们将执行GraphQL更改以在数据库中创建笔记。

首先，让我们在src/pages/new.js中创建NewNote组件：

import React, { useEffect } from 'react';
import { useMutation, gql } from '@apollo/client';
const NewNote = props => {
useEffect(() => {
// update the document title
document.title = 'New Note — Notedly';
});
return 
New note
;
};
export default NewNote;

接下来，让我们在src/pages/index.js文件中设置新路由：

// import the NewNote route component
import NewNote from './new';
// add a private route to our list of routes, within the

我们知道，我们将创建新笔记并更新现有笔记。为了适应这种行为，让我们创建一个名为NoteForm的新组件，该组件将用作笔记表单编辑的标记和React状态。

我们将在src/components/NoteForm.js中创建一个新文件。该组件将由一个包含文本区域以及一些最小样式的表单元素组成。该功能将非常类似于我们的UserForm组件：

import React, { useState } from 'react';
import styled from 'styled-components';
import Button from './Button';
const Wrapper = styled.div`
height: 100%;
`;
const Form = styled.form`
height: 100%;
`;
const TextArea = styled.textarea`
width: 100%;
height: 90%;
`;
const NoteForm = props => {
// set the default state of the form
const [value, setValue] = useState({ content: props.content || '' });
// update the state when a user types in the form
const onChange = event => {
setValue({
...value,
[event.target.name]: event.target.value
});
};
return (
 
 {
e.preventDefault();
props.action({
variables: {
...values
}
});
}}
>