补充: 建立 Todo list 画面

发现昨天的介绍中漏掉新增 Todo 的画面是怎麽来的，补充一下。

安装 React Material UI

加载套件

yarn add @material-ui/core

载入 Roboto 字型，可以用 cdn 的方式，在 app.blade.php 加上 link

// resources\views\app.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        ...
        <!-- 加这行 -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    </head>
    <body class="font-sans antialiased">
        ...
    </body>
</html>

载入 Font-icon，一样用 cdn

// resources\views\app.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        ...
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
        <!-- 加这行 -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    </head>
    <body class="font-sans antialiased">
        ...
    </body>
</html>

如果需要 svg 图示，载入套件

yarn add @material-ui/icons

编译

如果不是在容器里的话，可以执行更新画面的指令:

npm run watch

这个指令会让 laravel-mix 监听程序码的更新并自动打包，让画面可以同步程序码的改动。

不过在容器中的话 laravel-mix 会无法监听到程序码的更新，要改成用定时检查的方式触发更新，

sail npm run watch-poll

可以到 Dashboard 试试

// resources\js\Pages\Dashboard.js
...
import Button from "@material-ui/core/Button";

export default function Dashboard(props) {
    return (
        <Authenticated ...>
            //...

            // 加一颗按钮
            <Button variant="contained" color="primary">
                Hello world
            </Button>
        </Authenticated>
    );
}

存档後等 mix 跑完，重新整理画面後应该会出现一个按钮

添加 Form

接着来建立基础的 todo 新增表单

//resources\js\Pages\Dashboard.js
import React from "react";
import Authenticated from "@/Layouts/Authenticated";
import clsx from "clsx";
import {
    Container,
    Button,
    List,
    ListItem,
    ListItemText,
    TextField,
    Grid,
} from "@material-ui/core";
import { Head, Link, useForm } from "@inertiajs/inertia-react";
import { Inertia } from "@inertiajs/inertia";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
    textField: {
        marginRight: theme.spacing(1),
    },
}));

export default function Dashboard(props) {
    const classes = useStyles();
    const todos = [{ name: "todo1" }, { name: "todo2" }];
    const { data, setData, post, processing, errors, reset, transform } =
        useForm({
            todo: "",
        });

    const handleChange = (event) => {
        setData(
            event.target.name,
            event.target.type === "checkbox"
                ? event.target.checked
                : event.target.value
        );
    };

    const submit = (e) => {
        e.preventDefault();
        // post to api
    };

    return (
        <Authenticated
            auth={props.auth}
            errors={props.errors}
            header={
                <h2 className="font-semibold text-xl text-gray-800 leading-tight">
                    Dashboard
                </h2>
            }
        >
            <Head title="Dashboard" />

            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div className="p-6 bg-white border-b border-gray-200">
                            You logged in!
                        </div>
                    </div>
                </div>
            </div>
            <Container>
                <form onSubmit={submit}>
                    <Grid
                        container
                        direction="row"
                        justifyContent="flex-start"
                        alignItems="flex-end"
                    >
                        <TextField
                            className={clsx(classes.textField)}
                            id="todo"
                            label="Todo"
                            name="todo"
                            value={data.todo}
                            onChange={handleChange}
                        />
                        <Button
                            type="submit"
                            variant="contained"
                            color="primary"
                            disabled={processing}
                        >
                            Add
                        </Button>
                    </Grid>
                </form>
                <List>
                    {todos.map((item) => (
                        <ListItem button>
                            <ListItemText primary={item.name} />
                        </ListItem>
                    ))}
                </List>
            </Container>
        </Authenticated>
    );
}

References

Material-UI : Installation
Laravel-mix watch polling

<<:  DAY 11 Operators

>>:  Day11-JDK堆内存快照工具-jmap(一)基本应用

资视就是力量 - Highcharts / Vue 资料绑定

昨天我们成功安装 Highcharts-Vue 并绘制出一个基本的图表，不过既然都已经使用 Vue ...

Day 8. Hashicorp Nomad: Application Logs

Hashicorp Nomad: Application Logs AP log又多又杂，相信大部分...

数位签章(digital signature)

-数位签章 使用您的私钥加密代码的指纹或对代码进行散列并使用您的私钥加密结果是生成数字签名的 改写...

D15 第七周 前端基础 JavaScript - 事件传递

今天要分享的是事件传递的机制，相信初学的大家听到比较多的应该是捕获、冒泡、stopPropogati...

day26: 开始体验 ramda.js

今天我们要开始体验 Ramda，请大家到 Ramda.js 官网安装 Ramda 後， 就可以开始以...