Javascript React JS自定义表-处理表中的select下拉列表

这个表的一点上下文——我想创建一个表，用户可以在表头的下拉列表中选择一个选项并进行比较。因此，该表有两列，每列表示已选择的数据

我想要实现的是，当在第一列中选择了一个，比如说

业务

，我如何禁用

业务

/防止在第二列中选择它？因为比较两个相同的是没有意义的

还有没有更好的方法来处理两个select下拉列表的onChange？目前我有两种方法，它们非常相似。我试图只使用一个onChange方法，但在选择一个方法时无法阻止这两个方法都发生更改

以下是我到目前为止在我的桌子上所做的：

import React, { useEffect, useState } from "react";
import "./styles.css";

const Table = () => {
  const [plan, setPlan] = useState("business");
  const [planToCompare, setPlanToCompare] = useState("pro");

  const handleChange = (e) => {
    e.preventDefault();
    setPlan(e.target.value);
  };

  const handleChange2 = (e) => {
    e.preventDefault();
    setPlanToCompare(e.target.value);
  };

  const data = [
    {
      business: ["Lorem", "Ipsum", "Dolor sit amet"],
      pro: ["Lorem 1", "Ipsum 2", "Dolor sit amet 3"],
      free: ["Lorem 4", "Ipsum 5", "Dolor sit amet 6"]
    }
  ];

  const renderData = (plan1, plan2) => {
    const arr = data[0][plan1];
    const arr2 = data[0][plan2];

    return arr.map((item, index) => (
      <tr key={`plan_${index + 1}`}>
        <td>{item}</td>
        <td>{arr2[index]}</td>
      </tr>
    ));
  };

  return (
    <div className="container">
      <table>
        <thead>
          <tr>
            <th>
              <select datachosen={plan} onChange={(e) => handleChange(e)}>
                <option value={"business"}>Business</option>
                <option value={"pro"}>Pro</option>
                <option value={"free"}>Free</option>
              </select>
            </th>
            <th>
              <select
                id={"select2"}
                datachosen={planToCompare}
                onChange={(e) => handleChange2(e)}
              >
                <option value={"pro"}>Pro</option>
                <option value={"free"}>Free</option>
                <option value={"business"}>Business</option>
              </select>
            </th>
          </tr>
        </thead>
        <tbody>{renderData(plan, planToCompare)}</tbody>
      </table>
    </div>
  );
};

export default Table;

import React，{useffect，useState}来自“React”；
导入“/styles.css”；
常数表=（）=>{
const[plan，setPlan]=使用状态（“业务”）；
const[planToCompare，setPlanToCompare]=useState（“pro”）；
常数handleChange=（e）=>{
e、 预防默认值（）；
设定计划（如目标值）；
};
常数handleChange2=（e）=>{
e、 预防默认值（）；
setPlanToCompare（如目标值）；
};
常数数据=[
{
业务：[“Lorem”、“Ipsum”、“Dolor sit amet”]，
赞成者：[“Lorem 1”、“Ipsum 2”、“Dolor sit amet 3”]，
免费：[“Lorem 4”、“Ipsum 5”、“Dolor sit amet 6”]
}
];
常量渲染数据=（平面1、平面2）=>{
常数arr=数据[0][1]；
常数arr2=数据[0][plan2]；
返回arr.map（（项目，索引）=>(
{item}
{arr2[index]}
));
};
返回(
handleChange（e）}>
生意
赞成
自由的
handleChange2（e）}
>
赞成
自由的
生意
{renderData（平面图、工厂对比图）}
);
};
导出默认表；

---

这里是一个完整视图的工作

您需要将下拉数据保存在一个变量中，但当您在const

data=..

中启动它时，它将在每次渲染组件时重新创建，因此您需要将其保存在一个变量中或使用

useState：如果要更改数据，这很好，例如：添加另一个选项

const [data, setData] = useState([
  {
    business: ["Lorem", "Ipsum", "Dolor sit amet"],
    pro: ["Lorem 1", "Ipsum 2", "Dolor sit amet 3"],
    free: ["Lorem 4", "Ipsum 5", "Dolor sit amet 6"]
  }
]);

useMemo：如果您不愿意更改选项，这很好

const data = useMemo(() => {
  return [
    {
      business: ["Lorem", "Ipsum", "Dolor sit amet"],
      pro: ["Lorem 1", "Ipsum 2", "Dolor sit amet 3"],
      free: ["Lorem 4", "Ipsum 5", "Dolor sit amet 6"]
    }
  ];
}, []);

然后我需要两个变量来保存每个下拉列表的选项

// used useMemo because i want to update my planDropDownOptions only if data or planToCompare values gets changed
const planDropDownOptions = useMemo(() => {
  return Object.keys(data[0]).filter((option) => option !== planToCompare);
}, [data, planToCompare]);

// used useMemo because i want to update my planToCompareDropDownOptions only if data or plan values gets changed
const planToCompareDropDownOptions = useMemo(() => {
  return Object.keys(data[0]).filter((option) => option !== plan);
}, [data, plan]);

现在，当我们渲染选项时，应该是这样的

<select datachosen={plan} onChange={(e) => handleChange(e)}>
  {planDropDownOptions.map((option) => {
    return (
      <option key={option} value={option}>
        {option}
      </option>
    );
  })}
</select>

handleChange（e）}>
{plandropdownpoptions.map（（选项）=>{
返回(
{option}
);
})}

---

这是

非常感谢您的详细解释！它似乎更有效-完全没有使用备注用法很高兴它能帮助您对数据形状提出问题。。如果我将其更改为此形状-在UseMoom中访问数据的最佳方式是什么？使用

Object.keys（data）.filter（（option）

而不是

data[0]

更改为

data