ReactJS中点击按钮实现URL部分数值增减的实现方案是什么？

你需要用**可变状态（state）**存储当前头像的序号值，props属于父组件传递给子组件的只读数据，本身不支持直接修改，不适合存储需要随交互更新的变量。

核心实现逻辑 #

• 初始化状态存储当前头像ID，默认值可设为1
• 点击「上一张」按钮时对ID做递减操作，设置最小边界为1，避免序号为0或负数
• 点击「下一张」按钮时对ID做递增操作，可根据你的头像总数量设置最大边界
• 头像显示地址直接通过当前ID拼接生成：https://websitelink.com/avatar/${currentId}

不同场景代码示例 #

原生JavaScript实现 #

// 初始化变量
let currentAvatarId = 1;
const MAX_AVATAR_COUNT = 100; // 替换为你的实际头像总数
const avatarEl = document.getElementById('avatar-display');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');

// 公共更新头像方法
function renderAvatar() {
  avatarEl.src = `https://websitelink.com/avatar/${currentAvatarId}`;
}

// 绑定按钮事件
prevBtn.addEventListener('click', () => {
  if (currentAvatarId > 1) {
    currentAvatarId--;
    renderAvatar();
  }
});

nextBtn.addEventListener('click', () => {
  if (currentAvatarId < MAX_AVATAR_COUNT) {
    currentAvatarId++;
    renderAvatar();
  }
});

// 页面加载默认渲染第一张
renderAvatar();

React实现 #

import { useState } from 'react';

const AvatarGallery = () => {
  const MAX_AVATAR_COUNT = 100;
  const [currentId, setCurrentId] = useState(1);

  return (
    <div className="avatar-gallery">
      <img 
        src={`https://websitelink.com/avatar/${currentId}`} 
        alt="游戏头像" 
      />
      <div className="nav-buttons">
        <button 
          onClick={() => setCurrentId(prev => Math.max(1, prev - 1))}
          disabled={currentId === 1}
        >
          上一张
        </button>
        <button 
          onClick={() => setCurrentId(prev => Math.min(MAX_AVATAR_COUNT, prev + 1))}
          disabled={currentId === MAX_AVATAR_COUNT}
        >
          下一张
        </button>
      </div>
    </div>
  );
};

Vue3实现 #

<template>
  <div class="avatar-gallery">
    <img :src="`https://websitelink.com/avatar/${currentId}`" alt="游戏头像">
    <div class="nav-buttons">
      <button 
        @click="currentId = Math.max(1, currentId - 1)"
        :disabled="currentId === 1"
      >
        上一张
      </button>
      <button 
        @click="currentId = Math.min(MAX_AVATAR_COUNT, currentId + 1)"
        :disabled="currentId === MAX_AVATAR_COUNT"
      >
        下一张
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const MAX_AVATAR_COUNT = 100;
const currentId = ref(1);
</script>

如果需要在父子组件中实现该功能，不要直接在子组件修改props，将状态放在父组件维护，子组件通过回调（React）/自定义事件（Vue）触发父组件修改状态即可。

内容的提问来源于stack exchange，提问作者Arpit Pandey