当前位置：首页 > React

react实现保存编辑年龄

2026-01-27 12:51:33React

实现保存编辑年龄功能

在React中实现保存编辑年龄的功能，可以通过状态管理和表单控制来完成。以下是具体实现方法：

使用useState管理状态

import React, { useState } from 'react';

function AgeEditor() {
  const [age, setAge] = useState(25);
  const [isEditing, setIsEditing] = useState(false);
  const [tempAge, setTempAge] = useState(age);

  const handleEdit = () => {
    setIsEditing(true);
    setTempAge(age);
  };

  const handleSave = () => {
    setAge(tempAge);
    setIsEditing(false);
  };

  const handleCancel = () => {
    setIsEditing(false);
  };

  const handleChange = (e) => {
    setTempAge(e.target.value);
  };

  return (
    <div>
      {isEditing ? (
        <div>
          <input 
            type="number" 
            value={tempAge} 
            onChange={handleChange} 
          />
          <button onClick={handleSave}>保存</button>
          <button onClick={handleCancel}>取消</button>
        </div>
      ) : (
        <div>
          <span>年龄: {age}</span>
          <button onClick={handleEdit}>编辑</button>
        </div>
      )}
    </div>
  );
}

使用表单验证

添加年龄验证确保输入有效：

const handleSave = () => {
  if (tempAge >= 0 && tempAge <= 120) {
    setAge(tempAge);
    setIsEditing(false);
  } else {
    alert('请输入有效的年龄(0-120)');
  }
};

使用useReducer管理复杂状态

对于更复杂的状态逻辑，可以使用useReducer：

const initialState = {
  age: 25,
  isEditing: false,
  tempAge: 25,
  error: null
};

function reducer(state, action) {
  switch (action.type) {
    case 'EDIT':
      return { ...state, isEditing: true, tempAge: state.age };
    case 'SAVE':
      if (action.payload >= 0 && action.payload <= 120) {
        return { ...state, age: action.payload, isEditing: false, error: null };
      }
      return { ...state, error: '无效年龄' };
    case 'CANCEL':
      return { ...state, isEditing: false, error: null };
    case 'CHANGE':
      return { ...state, tempAge: action.payload };
    default:
      return state;
  }
}

function AgeEditor() {
  const [state, dispatch] = useReducer(reducer, initialState);

  // ... 使用dispatch分发action
}

持久化存储

如果需要将年龄保存到本地存储：

useEffect(() => {
  localStorage.setItem('userAge', age);
}, [age]);

// 初始化时从本地存储读取
const [age, setAge] = useState(() => {
  const savedAge = localStorage.getItem('userAge');
  return savedAge ? parseInt(savedAge) : 25;
});

使用自定义Hook封装逻辑

将年龄编辑逻辑封装成自定义Hook：

function useAgeEditor(initialAge) {
  const [age, setAge] = useState(initialAge);
  const [isEditing, setIsEditing] = useState(false);
  const [tempAge, setTempAge] = useState(initialAge);

  const edit = () => {
    setIsEditing(true);
    setTempAge(age);
  };

  const save = () => {
    setAge(tempAge);
    setIsEditing(false);
  };

  const cancel = () => {
    setIsEditing(false);
  };

  const change = (newAge) => {
    setTempAge(newAge);
  };

  return {
    age,
    isEditing,
    tempAge,
    edit,
    save,
    cancel,
    change
  };
}

然后在组件中使用：

function AgeEditor() {
  const {
    age,
    isEditing,
    tempAge,
    edit,
    save,
    cancel,
    change
  } = useAgeEditor(25);

  // ... 渲染逻辑
}

这些方法提供了不同复杂度的实现方案，可以根据项目需求选择合适的方案来实现保存编辑年龄的功能。

react实现保存编辑年龄