如何在APEX中为同一表单设置不同的表单标题

核心思路是通过按钮的点击事件，动态修改表单标题的文本内容，以下是不同技术栈的具体实现方式：

原生JavaScript实现 #

HTML结构 #

<!-- 操作按钮 -->
<button id="createBtn">创建新行</button>
<button id="editBtn">编辑行</button>

<!-- 表单容器 -->
<div class="form-box">
  <h2 id="formTitle">表单标题</h2>
  <form>
    <input type="text" placeholder="输入内容">
    <button type="submit">提交</button>
  </form>
</div>

JavaScript逻辑 #

// 获取DOM元素
const createBtn = document.getElementById('createBtn');
const editBtn = document.getElementById('editBtn');
const formTitle = document.getElementById('formTitle');
const form = document.querySelector('form');

// 创建按钮点击事件
createBtn.addEventListener('click', () => {
  formTitle.textContent = 'create new row';
  form.reset(); // 重置表单，清除编辑残留数据
});

// 编辑按钮点击事件
editBtn.addEventListener('click', () => {
  formTitle.textContent = 'Edit row';
  // 此处可添加逻辑：将待编辑行的数据填充到表单中
  // 示例：document.querySelector('input').value = 待编辑内容;
});

Vue3实现 #

<template>
  <div>
    <button @click="switchToCreate">创建新行</button>
    <button @click="switchToEdit">编辑行</button>

    <div class="form-box">
      <h2>{{ formTitle }}</h2>
      <form>
        <input type="text" v-model="formData.content" placeholder="输入内容">
        <button type="submit">提交</button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 响应式变量控制标题和表单数据
const formTitle = ref('');
const formData = ref({ content: '' });

// 切换到创建状态
const switchToCreate = () => {
  formTitle.value = 'create new row';
  formData.value.content = ''; // 重置表单
};

// 切换到编辑状态
const switchToEdit = () => {
  formTitle.value = 'Edit row';
  // 此处可添加逻辑：从数据源获取待编辑数据并填充
  // 示例：formData.value.content = 待编辑内容;
};
</script>

React实现 #

import { useState } from 'react';

function FormComponent() {
  const [formTitle, setFormTitle] = useState('');
  const [formData, setFormData] = useState('');

  // 创建按钮点击处理
  const handleCreate = () => {
    setFormTitle('create new row');
    setFormData(''); // 重置表单
  };

  // 编辑按钮点击处理
  const handleEdit = () => {
    setFormTitle('Edit row');
    // 此处可添加逻辑：获取待编辑数据并填充到表单
    // 示例：setFormData(待编辑内容);
  };

  return (
    <div>
      <button onClick={handleCreate}>创建新行</button>
      <button onClick={handleEdit}>编辑行</button>

      <div className="form-box">
        <h2>{formTitle}</h2>
        <form>
          <input
            type="text"
            value={formData}
            onChange={(e) => setFormData(e.target.value)}
            placeholder="输入内容"
          />
          <button type="submit">提交</button>
        </form>
      </div>
    </div>
  );
}

export default FormComponent;

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