Reactを使ってブログサイトを作る 08 - 投稿ページの静的構造の構築

Publishページの静的構造の構築

• src/publish/index.js

import {
Card,
Breadcrumb,
Form,
Button,
Radio,
Input,
Upload,
Space,
Select
  } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import './index.scss'
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; 
import { useEffect, useState } from 'react';
import {getChannelsAPI} from '@/apis/article'
const { Option } = Select
const Publish = () => {
const [channels,setChannelList] = useState([])
useEffect(()=>{
async function getChannelList(){
const res = await getChannelsAPI()
setChannelList(res.data.channels)
        }
getChannelList()
    },[])
return (
<div className="publish">
<Card
title={
<Breadcrumb items={[
              { title: <Link to={'/'}>首页</Link> },
              { title: '发布文章' },
            ]}
/>
}
>
<Form
labelCol={{ span: 4 }}
wrapperCol={{ span: 16 }}
initialValues={{ type: 1 }}
>
<Form.Item
label="Title"
name="title"
rules={[{ required: true, message: 'Please input title!' }]}
>
<Input placeholder="Please input title" style={{ width: 400 }} />
</Form.Item>
<Form.Item
label="Channel"
name="channel_id"
rules={[{ required: true, message: 'Please select channel' }]}
>
<Select placeholder="Please select channel" style={{ width: 400 }}>
{channels.map(item => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
              ))}
</Select>
</Form.Item>
<Form.Item
label="Content"
name="content"
rules={[{ required: true, message: 'Please input contents' }]}
></Form.Item>
<ReactQuill
className="publish-quill"
theme="snow"
placeholder="Please input contents"
/>
<Form.Item wrapperCol={{ offset: 4 }}>
<Space>
<Button size="large" type="primary" htmlType="submit">
                  Submit
</Button>
</Space>
</Form.Item>
</Form>
</Card>
</div>
    )
  }
export default Publish

• src/index/scss

.publish {
position: relative;
  }
.ant-upload-list {
.ant-upload-list-picture-card-container,
.ant-upload-select {
width: 146px;
height: 146px;
    }
  }
.publish-quill {
.ql-editor {
position: relative;
min-height: 300px;
    }
  }

チャンネルリストの取得

記事の投稿

• formコンポーネントのonFinish属性を設定
• onFinished関数内で、最初に送信する記事データを組み立て、次に送信するAPIを呼び出す