如何在表单组件中处理 CRUD
介绍
表单几乎无处不在，无论是在线预订门户、注册页面、反馈评论系统还是任何其他用于收集数据的表单。每个表单都是使用创建、读取、更新和删除操作（也称为CRUD）组合构建的。这些操作是构建 Web 应用程序的最重要部分，了解如何在表单中处理它们非常重要。
在本指南中，为了简洁起见，我们将通过构建一个简单而强大的无后端应用程序来了解如何在表单组件中实现创建和删除操作。我们将学习将基本表单组件转换为可执行创建和删除操作的受控组件，并使用 Redux 存储通过 Reducer 将数据检索到 DOM，方法是为这两个操作分派操作。
项目设置
确保您的机器上安装了 Nodejs 和 npm（至少版本 8 或更高版本）以及代码编辑器和 Web 浏览器（最好是 Chrome 或 Firefox）。
在本指南中，我们将构建一个简单的待办事项应用程序，用户可以在其中将项目添加到列表中并单独删除它们。
使用create-react-app创建一个新项目：
npx create-react-app redux-todo
安装依赖项 Redux 和 React-Redux：
npm install redux react-redux
为了避免写下大量的 CSS，请使用 MaterializeCSS 快速设置内容样式。将 MaterializeCSS CDN 包含在公共文件夹内的index.html文件中。
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
在index.css中添加一些额外的样式。
.todo{
padding: 5px;
font-size: 20px;
}
.todo span{
float: right;
cursor: pointer;
height: 30px;
width: 25px;
padding: 2px;
background: tomato;
text-align: center;
}
input[type=text] {
height: 50px;
width: 40%;
padding: 10px 12px;
margin: 5px 15px;
margin-left: -60px;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
border: 1px solid #404040;
font-size: 24px;
}
form{
padding: 10px;
margin-left: 320px;
max-width: 400px;
}
应用程序结构
该应用将包含两个组件：一个用于处理表单，另一个用于呈现待办事项列表。您将使用 Redux 创建一个存储，并让 rootReducer负责生成新的待办事项、删除旧的待办事项以及通过分派各自的操作将待办事项添加到列表中。
文件夹结构
redux-todo
├── src -- src folder
└── actions -- actions folder
├── actionCreator.js -- the declaration of actions
├── todoAction.js -- the definition of actions
└── components -- components folder
├── TodoForm.js -- form component
├── Todos.js -- component for rendering todos
└── reducers -- reducers folder
├── rootReducer.js -- the definition of reducer
待办事项架构
todo 模式将包含一些表示 todo 项的文本以及用于删除 todo 并唯一区分它们的 ID。
雷克斯
首先创建两个动作创建器，一个用于向列表中添加项目，另一个用于从列表中删除项目。
export const ADD_TODO= 'ADD_TODO';
export const DELETE_TODO='DELETE_TODO';
操作
将这些动作创建者导入到todoAction.js中，并为两个动作分别定义两个方法。
import {ADD_TODO} from './actionCreator';
import {DELETE_TODO} from './actionCreator';
export const addTodo=(todo)=>{
const action={
type:ADD_TODO,
todo
}
return action;
}
export const deleteTodo=(id)=>{
const action={
type:DELETE_TODO,
id
}
return action;
}
将项目添加到列表的操作将包含其中的整个待办事项，而删除待办事项只需要一个 ID。
减速器
在rootReducer.js中，导入操作创建器并定义初始状态，该状态一开始将是一个空数组。将操作与状态一起传递到todos方法中，并使用初始状态作为默认参数。要添加待办事项，请调用一个函数以使用Math.random()返回一个由待办事项项和该项目的新生成的 ID 组成的对象。要删除待办事项，请将id与状态一起获取，并使用数组过滤器方法返回一个新数组，该数组包含除要删除的待办事项之外的所有待办事项。
import { ADD_TODO, DELETE_TODO } from '../actions/actionCreator';
const initState=[];
const todofn=(action)=>{
return{
todo:action.todo,
id:Math.random()
}
}
const deleteByID=(state=initState,id)=>{
const todos=state.filter(todo=>{
return todo.id!==id;
})
return todos;
}
const todos=(state=initState,action)=>{
let todos=null;
switch(action.type){
case ADD_TODO:
todos=[...state,todofn(action)]
return todos;
case DELETE_TODO:
todos=deleteByID(state,action.id)
return todos;
default:
return state;
}
}
export default todos;
店铺
创建一个存储和提供程序组件以在index.js中获取集中数据存储。
import { createStore } from 'redux';
import {Provider} from 'react-redux';
import rootReducer from './reducers/rootReducer';
const store=createStore(rootReducer);
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
成分
表单组件
TodoForm.js将是一个类组件，用于跟踪使用其本地状态添加的每个新待办事项。
import React, {Component} from 'react';
import { connect } from 'react-redux';
import { addTodo} from '../actions/todoAction';
import {deleteTodo} from '../actions/todoAction';
import Todos from './Todos';
class TodoForm extends Component{
state={
todo:''
}
handleChange=(e)=>{
this.setState({
[e.target.id]:e.target.value
})
}
handleSubmit=(e)=>{
e.preventDefault();
this.props.addTodo(this.state.todo)
}
deleteTodo=(id)=>{
this.props.deleteTodo(id);
}
render(){
return(
<div className="container">
<form onSubmit={this.handleSubmit}>
<input type="text" id="todo" placeholder="what to do today?..." onChange={this.handleChange}/>
<button className="btn green" onClick={this.handleSubmit}>Add todo!</button>
</form>
<Todos todos={this.props.todos} deleteTodo={this.deleteTodo}/>
</div>
)
}
}
const mapStateToProps=(state)=>{
console.log('state',state);
return{
todos:state
}
}
export default connect(mapStateToProps,{addTodo,deleteTodo})(TodoForm);
render方法返回一些带有输入字段和添加按钮的表单的 JSX。将onChange事件侦听器附加到输入字段，以便在每次触发时设置组件的状态。在表单内部，使用onSubmit事件调用handleSubmit函数。此函数接收事件对象以防止页面默认重新加载，并通过使用connect高阶组件将此组件的状态映射到 props 来将状态添加到 props 。我们还需要传递dispatch作为第二个参数，它将操作作为键值对（使用 ES6 简写符号）并将表单组件传递给connect方法。
<fon
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~