React 表单的新增、编辑的代码
时间: 2024-03-05 21:53:22 浏览: 19
以下是 React 表单的新增、编辑的代码示例:
```jsx
import React, { useState, useEffect } from 'react';
function Form(props) {
const [formData, setFormData] = useState({
name: '',
email: '',
phone: ''
});
useEffect(() => {
if (props.editData) {
setFormData(props.editData);
}
}, [props.editData]);
const handleInputChange = (event) => {
const { name, value } = event.target;
setFormData((prevData) => ({
...prevData,
[name]: value
}));
};
const handleSubmit = (event) => {
event.preventDefault();
props.onSubmit(formData);
};
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">Name:</label>
<input
type="text"
name="name"
id="name"
value={formData.name}
onChange={handleInputChange}
required
/>
</div>
<div>
<label htmlFor="email">Email:</label>
<input
type="email"
name="email"
id="email"
value={formData.email}
onChange={handleInputChange}
required
/>
</div>
<div>
<label htmlFor="phone">Phone:</label>
<input
type="tel"
name="phone"
id="phone"
value={formData.phone}
onChange={handleInputChange}
required
/>
</div>
<button type="submit">{props.editData ? 'Update' : 'Add'}</button>
</form>
);
}
export default Form;
```
在上面的代码中,我们定义了一个 `Form` 组件,该组件接收一个 `editData` 和一个 `onSubmit` 函数作为 props。`editData` 表示编辑的数据,如果传入该参数,则表示编辑模式,否则表示新增模式。`onSubmit` 函数用于提交表单数据到后端服务器。
在组件内部,我们使用 `useState` 钩子来定义一个名为 `formData` 的状态,该状态包含表单数据的所有字段。我们还使用 `useEffect` 钩子来在组件首次渲染时初始化表单数据。
表单数据的变化是通过 `handleInputChange` 函数实现的,该函数通过事件对象获取用户输入的字段名和字段值,并使用 `setFormData` 函数更新表单数据。这里我们使用了对象展开运算符和计算属性名语法,以便更新指定的字段。
表单的提交是通过 `handleSubmit` 函数实现的,该函数会阻止默认的表单提交事件,并调用 `onSubmit` 函数将表单数据传递给父组件。
最后,我们使用 JSX 语法来渲染表单界面。根据 `editData` 的有无,我们可以渲染不同的按钮文本,以便区分新增表单和编辑表单。