能执行操作的表单
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 30 课，共 47 课。
在普通 HTML 中，表单的 action 是要向其发送 POST 请求的 URL。在 Next.js 中，你可以直接传入一个函数：
import { addItem } from './actions';
<form action={addItem}>
<input name="text" />
<button type="submit">Add</button>
</form>提交时，React 会帮你做三件事：阻止浏览器正常提交并重新加载页面，将表单中命名的字段收集到 FormData 对象中，然后用它调用你的 action。
注意看这里没有什么：没有 onSubmit，没有 event.preventDefault()，也没有状态。而且这个页面仍然是服务器组件：传递的是操作数据，而不是事件处理函数，所以它可以顺利跨越边界。
有一点需要提前说明：项目已经保存，但屏幕上的列表暂时不会变化。页面已经在服务器上渲染完成，而且还没有任何东西告诉它重新查看。再过两课，你就会用一行代码解决这个问题。
挑战
入门购物清单中有一个输入框和一个按钮，但它们还没有连接到服务器。你需要的操作已经写在 app/actions.js 中。
- 在
app/page.jsx中，从'./actions'导入addItem。 - 用带有
id="add-form"的<form>包住输入框和按钮。 - 为这个表单设置
action={addItem}。
不要改动输入框的 name="text"：操作会根据这个名称读取字段。
亲手试试
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
