react实现表单编辑

使用受控组件实现表单编辑

在React中，受控组件是处理表单编辑的推荐方式。每个表单元素的值都由React状态管理，并通过onChange事件更新。

import React, { useState } from 'react';

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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Submitted:', formData);
  };

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

使用Formik库简化表单处理

Formik是一个流行的React表单库，可以简化表单状态管理、验证和提交处理。

import { Formik, Form, Field } from 'formik';

function EditFormWithFormik() {
  const initialValues = {
    username: '',
    password: ''
  };

  const handleSubmit = (values) => {
    console.log('Form values:', values);
  };

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
    >
      <Form>
        <Field name="username" type="text" placeholder="Username" />
        <Field name="password" type="password" placeholder="Password" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

实现动态表单字段

对于需要动态增减表单项的情况，可以使用数组状态来管理字段。

function DynamicForm() {
  const [fields, setFields] = useState([{ value: '' }]);

  const handleChange = (index, event) => {
    const values = [...fields];
    values[index].value = event.target.value;
    setFields(values);
  };

  const handleAdd = () => {
    setFields([...fields, { value: '' }]);
  };

  const handleRemove = (index) => {
    const values = [...fields];
    values.splice(index, 1);
    setFields(values);
  };

  return (
    <div>
      {fields.map((field, idx) => (
        <div key={idx}>
          <input
            type="text"
            value={field.value}
            onChange={(e) => handleChange(idx, e)}
          />
          <button type="button" onClick={() => handleRemove(idx)}>
            Remove
          </button>
        </div>
      ))}
      <button type="button" onClick={handleAdd}>
        Add Field
      </button>
    </div>
  );
}

表单验证实现

添加基本的表单验证逻辑，可以在提交前检查字段有效性。

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

  const validate = () => {
    let isValid = true;
    const newErrors = {};

    if (!formData.email.includes('@')) {
      newErrors.email = 'Invalid email address';
      isValid = false;
    }

    if (formData.password.length < 6) {
      newErrors.password = 'Password must be at least 6 characters';
      isValid = false;
    }

    setErrors(newErrors);
    return isValid;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      console.log('Form is valid, submitting:', formData);
    }
  };

  // ... rest of the form implementation with error display
}

使用React Hook Form优化性能

React Hook Form是一个轻量级表单库，通过减少不必要的重新渲染来优化性能。

import { useForm } from 'react-hook-form';

function HookForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('firstName', { required: true })} />
      {errors.firstName && <span>This field is required</span>}

      <input {...register('lastName', { required: true })} />
      {errors.lastName && <span>This field is required</span>}

      <button type="submit">Submit</button>
    </form>
  );
}