以下是一个基于React的示例代码，展示了如何创建一个响应式表单，并实现编辑和添加页面的视图：

import React, { useState } from 'react';

const Form = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phoneNumber: '',
  });

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

  const handleSubmit = (e) => {
    e.preventDefault();
    // 在这里执行提交操作，例如向后端发送数据
    console.log(formData);
  };

  return (
    

      姓名
      

      邮箱
      

      电话号码
      

      提交
    
  );
};

export default Form;

上述代码创建了一个表单组件Form，它使用useState钩子来管理表单数据的状态。表单数据存储在formData对象中，每个表单字段都对应一个键值对。handleChange函数用于更新表单数据，它使用了展开运算符(...)来创建新的表单数据对象。handleSubmit函数用于处理表单的提交，这里只是简单地打印了表单数据。

在表单的每个输入字段中，value属性绑定了对应的表单数据，并且onChange事件监听用户的输入，更新表单数据。

你可以根据自己的需求进行修改和扩展，例如添加更多字段、表单验证等。