React开发中实现点击按钮显示通用表单有没有更简洁的实现方案？

核心思路 #

不用为每个按钮单独声明状态，仅用单个状态存储当前激活的日期标识即可实现需求，点击按钮时切换激活的日期，只有匹配激活状态的位置才会渲染表单，同时可以抽离重复的按钮配置用循环渲染，大幅减少重复代码。

改写后的完整代码 #

import React, {useState} from 'react'
import DietForm from './dietform.js'

// 抽离星期配置，后续增改日期直接修改这个数组即可
const WEEK_DAYS = [
  'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'
]

function AddDiet() {
  // 存储当前要显示表单的日期，初始为null代表所有表单都不显示
  const [activeDay, setActiveDay] = useState(null)

  const toggleForm = (day) => {
    // 如果点击的是已经激活的日期，就收起表单，否则切换为当前点击的日期
    setActiveDay(activeDay === day ? null : day)
  }

  return (
    <div>
      {WEEK_DAYS.map(day => (
        <div key={day}>
          <button 
            onClick={() => toggleForm(day)}
            // 注意React规范中要用className代替原生的class属性
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          >
            {day}
          </button>
          {/* 只有当前日期是激活状态时才渲染表单，还可以把日期参数传给表单做后续业务处理 */}
          {activeDay === day && <DietForm day={day} />}
        </div>
      ))}
    </div>
  )
}

export default AddDiet

方案优势 #

• 没有重复的状态和事件函数声明，后续新增按钮只需要修改WEEK_DAYS数组即可，维护成本极低
• 永远只渲染1个DietForm组件，不会同时出现多个表单实例，完全符合你的需求
• 可以直接把当前选中的日期传递给DietForm组件，方便表单提交时关联对应日期的数据

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