react实现编辑页面

React 实现编辑页面的方法

React 中实现编辑页面通常需要处理表单状态、数据提交和用户交互。以下是几种常见的方法：

使用受控组件

受控组件通过 React 的状态管理表单数据，每个输入字段的值由 React 状态控制。这种方法适合需要实时验证或动态交互的场景。

import { useState } from 'react';

function EditForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

使用非受控组件

非受控组件通过 ref 直接访问 DOM 元素的值，适合简单表单或需要手动处理数据的场景。

import { useRef } from 'react';

function EditForm() {
  const nameRef = useRef();
  const emailRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({
      name: nameRef.current.value,
      email: emailRef.current.value
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={nameRef} />
      <input type="email" ref={emailRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

使用表单库（如 Formik）

Formik 是一个流行的表单库，提供了表单状态管理、验证和提交的完整解决方案。

import { useFormik } from 'formik';

function EditForm() {
  const formik = useFormik({
    initialValues: {
      name: '',
      email: ''
    },
    onSubmit: values => {
      console.log(values);
    }
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        type="text"
        name="name"
        value={formik.values.name}
        onChange={formik.handleChange}
      />
      <input
        type="email"
        name="email"
        value={formik.values.email}
        onChange={formik.handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

动态加载编辑数据

编辑页面通常需要从后端加载数据并填充表单。可以使用 useEffect 和异步请求实现。

import { useState, useEffect } from 'react';

function EditForm({ id }) {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`/api/data/${id}`);
      const data = await response.json();
      setFormData(data);
    };
    fetchData();
  }, [id]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

表单验证

表单验证可以通过自定义逻辑或库（如 Yup）实现。以下是一个简单的验证示例：

function EditForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });
  const [errors, setErrors] = useState({});

  const validate = () => {
    const newErrors = {};
    if (!formData.name) newErrors.name = 'Name is required';
    if (!formData.email) newErrors.email = 'Email is required';
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      console.log(formData);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />
      {errors.name && <div>{errors.name}</div>}
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      {errors.email && <div>{errors.email}</div>}
      <button type="submit">Submit</button>
    </form>
  );
}

这些方法可以根据具体需求选择或组合使用，以实现灵活高效的编辑页面功能。