在模式的下拉列表中呈现不同数据的问题

Question

我正在尝试通过单击按钮来呈现模式。我将模态渲染得非常好。我在模式中有两个下拉菜单，当我们单击模式中的添加更多按钮时，它们可能会被复制。当我点击添加更多按钮时，下拉菜单会重复。

这里的问题是：

1.当我们在第一个下拉列表中选择第一个选项并继续在第二个下拉列表中选择第二个选项时，第二个下拉列表对我们没有任何价值。并且第一个下拉列表的值正在更新为它的第二个值。

2.当我们添加另一组下拉菜单时，问题 1 就在那里，并且由于上述问题，第一个下拉菜单的值与所有第一个下拉菜单的值同步。

您可以在我附在下面的 CodeSandbox 中查看问题：

https://codesandbox.io/s/winter-wildflower-oz7do?file=/src/App.js

Answer 1

1. 当我们在第一个下拉列表中选择第一个选项并继续在第二个下拉列表中选择第二个选项时，第二个下拉列表对我们没有任何价值。并且第一个下拉列表的值正在更新为它的第二个值。

这就是你告诉代码调用函数所做的事情

const handleChange = (event) => {
  setReview(event.target.value);
};

在您更改选项的那一刻，评论值会更新；因此，您的第一个下拉菜单中的值正在改变，而不是您的第二个下拉菜单中的选项值。

1. 当我们添加另一组下拉菜单时，问题 1 就在那里，并且由于上述问题，第一个下拉菜单的值与所有第一个下拉菜单同步。

这也是您告诉系统执行的操作。因为您只是在更新使用const [review, setReview] = useState(""); 声明的字符串状态

正如您所注意到的，这里的问题是两方面的。 方法是您 1) 确保您正在更新正确的值（审查或选项）和 2) 将更新的值保存在您已经创建的数组中，并在单击“+ 添加”后填充另一个对象更多”按钮，表示数组的那些：

const [reviewInput, setReviewInput] = useState([{ review: "" }]);
const [reviewOption, setReviewOption] = useState([{ option: "" }]);  

什么意思，为了更新评论输入数组，您可以执行以下操作：

const handleChangeReviewInput = (event, index) => {
    setReviewInput([
      ...reviewInput.map((item, key) =>
        key === index ? { review: event.target.value } : item
      )
    ]);
  };

该函数正在检查您尝试更改的数组中的位置。如果找到：使用给定值更新输入。

在您的下拉渲染中：

<Select
  labelId="demo-simple-select-standard-label"
  id="demo-simple-select-standard"
  value={reviewInput.review} // taking the review string of your item in the array
  onChange={(e) =>
    handleChangeReviewInput(e, index) // passing the index (position in the array)
  }
  label="Review"
>...</Select>

您可以对您的评论选项进行类似操作：

const handleChangeOption = (event, index) => {
  setReviewOption([
    ...reviewOption.map((item, key) =>
      key === index ? { option: event.target.value } : item
    )
  ]);
};

和

<Select
  labelId="demo-simple-select-standard-label"
  id="demo-simple-select-standard"
  value={item.option} // taking option string from your item in the array
  onChange={(e) => handleChangeOption(e, index)} // passing index
  label="Option"
>...</Select>

查看工作版本： https://codesandbox.io/s/jovial-greider-9uthk?file=/src/App.js

一般来说，您可能需要考虑为您的评论输入和评论选项设置一个数组；然后有一个函数来更新评论输入或选项。