ARKTS写一个添加删除商品页面代码

ARKTS是一个假设性的术语，可能是某个特定项目或系统的缩写，没有明确说明它是什么。但从一般的角度来看，如果我们要创建一个添加和删除商品的基本页面代码示例，比如在前端使用JavaScript和HTML（假设我们正在使用React.js库），这可能会看起来像这样：

// 添加商品组件 (AddProduct.js)
import React, { useState } from 'react';

const AddProduct = () => {
  const [product, setProduct] = useState({ name: '', price: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    // 这里你可以发送数据到服务器，这里只是模拟
    console.log('Adding product:', product);
    setProduct({}); // 清空表单
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Name" value={product.name} onChange={(e) => setProduct({...product, name: e.target.value})} />
      <input type="number" placeholder="Price" value={product.price} onChange={(e) => setProduct({...product, price: e.target.value})} />
      <button type="submit">Add</button>
    </form>
  );
};

export default AddProduct;

// 删除商品组件 (DeleteProduct.js)
import React, { useContext } from 'react';
import { useReducer } from 'react hooks';

const initialState = { selectedProduct: null };
const reducer = (state, action) => {
  switch (action.type) {
    case 'SELECT_PRODUCT':
      return { ...state, selectedProduct: action.payload };
    case 'DELETE_PRODUCT':
      if (state.selectedProduct) {
        return { ...state, selectedProduct: null };
      }
      break;
    default:
      throw new Error();
  }
  return state;
};

const ProductContext = React.createContext();

const DeleteProduct = ({ products }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const deleteProduct = (productId) => {
    dispatch({ type: 'DELETE_PRODUCT', payload: productId });
  };

  // 假设products是一个产品数组
  return (
    <ProductContext.Consumer>
      {(products) =>
        products.map((product, index) => (
          <div key={index}>
            {/* 显示商品信息 */}
            <span>{product.name}</span>
            <button onClick={() => dispatch({ type: 'SELECT_PRODUCT', payload: product.id })}>Select</button>
            <button onClick={() => deleteProduct(product.id)}>Delete</button>
          </div>
        ))}
      </ProductContext.Provider>
  );
};

export default DeleteProduct;

这个例子中，`AddProduct`用于收集用户输入并提交新商品，而`DeleteProduct`从上下文中获取选中的商品并提供删除操作。请注意，实际项目中你还需要连接到数据库、API或其他数据存储服务，并处理网络请求。