如何更改反應組件中當前地圖項的狀態

我在每次地圖迭代時呈現了三個下拉串列。如何獨立更改它們中的每一個的狀態？

現在我只能在通過單擊另一個下拉串列將狀態設定為新值時關閉當前下拉串列

const [opened, setOpened] = useState(null);
const inputs = [{
            id: 1,
            title: "Location",
            value: ["Berlin"]
        },
        {
            id: 2,
            title: "Date",
            value: ["Sunday"]
        },
        {
            id: 3,
            title: "Time",
            value: ["2am"]
        }];
<div className="myDropdownButton">
                        {inputs.map((input, index) => (
                            <div className="myButtonWrapper">
                                <div onClick={() => handleClickedDropdown(index)}
                                     placeholder={input.value}
                                     className="myButton">
                                    <div className="myButtonInner">
                                        <div>
                                            <label htmlFor="input" className="myLabel">{input.title}</label>
                                            <input placeholder={input.value}
                                                   value={input.value}
                                                   className="myInput"
                                                   type="text"
                                                   readOnly/>
                                        </div>
                                        <span>▼</span>
                                    </div>
                                </div>
                                <div className={opened === index ? "myDropdown" : "dropHidden"}>
                                    <div className="myDropdownInnerWrapper">
                                        <div className="myDropdownInner">
                                            <div className="myLocationOptions">{input.id}</div>
                                            <div className="myLocationOptions">{input.id}</div>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>```

uj5u.com熱心網友回復：

您可以檢查索引，我會創建物件狀態而不是字串。這是作業版本https://codesandbox.io/embed/wonderful-wind-jiwvdi?fontsize=14&hidenavigation=1&theme=dark

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

    export default function App() {
      const [opened, setOpened] = useState({ index: null, open: false });
      const inputs = [
        {
          id: 1,
          title: "Location",
          value: ["Berlin"]
        },
        {
          id: 2,
          title: "Date",
          value: ["Sunday"]
        },
        {
          id: 3,
          title: "Time",
          value: ["2am"]
        }
      ];
    
      const handleClickedDropdown = (index) => {
        if (index === opened.index) {
          setOpened({ index: null, open: false });
        } else {
          setOpened({ index: index, open: true });
        }
      };
      return (
        <div className="myDropdownButton">
          {inputs.map((input, index) => (
            <div className="myButtonWrapper">
              <div
                onClick={() => handleClickedDropdown(index)}
                placeholder={input.value}
                className="myButton"
              >
                <div className="myButtonInner">
                  <div>
                    <label htmlFor="input" className="myLabel">
                      {input.title}
                    </label>
                    <input
                      placeholder={input.value}
                      value={input.value}
                      className="myInput"
                      type="text"
                      readOnly
                    />
                  </div>
                  <span>▼</span>
                </div>
              </div>
              <div className={opened.index === index ? "myDropdown" : "dropHidden"}>
                <div className="myDropdownInnerWrapper">
                  <div className="myDropdownInner">
                    <div className="myLocationOptions">{input.id}</div>
                    <div className="myLocationOptions">{input.id}</div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      );
    }

uj5u.com熱心網友回復：

設定地圖中每個元素的打開狀態切換索引的值，然后根據打開狀態的值創建一個條件，當它改變時顯示或隱藏。我想你在下面試試這個：

const [opened, setOpened] = useState(null);
    const inputs = [{
        id: 1,
        title: "Location",
        value: ["Berlin"]
    },
    {
        id: 2,
        title: "Date",
        value: ["Sunday"]
    },
    {
        id: 3,
        title: "Time",
        value: ["2am"]
    }];
    const handleClickedDropdown = (index) => {
        setOpened(index)
    }
    return (
        <div className="myDropdownButton">
            {inputs.map((input, index) => (
                <div className="myButtonWrapper">
                    <div onClick={() => handleClickedDropdown(index)}
                        placeholder={input.value}
                        className="myButton">
                        <div className="myButtonInner">
                            <div>
                                <label htmlFor="input" className="myLabel">{input.title}</label>
                                <input placeholder={input.value}
                                    value={input.value}
                                    className="myInput"
                                    type="text"
                                    readOnly />
                            </div>
                            <span>▼</span>
                        </div>
                    </div>
                    <div className="" style={{display: `${opened === index ? 'block' : 'none'}`}}>
                        <div className="myDropdownInnerWrapper">
                            <div className="myDropdownInner">
                                <div className="myLocationOptions">{input.id}</div>
                                <div className="myLocationOptions">{input.value}</div>
                            </div>
                        </div>
                    </div>
                </div>
            ))}
        </div>

    )

標籤：反应

上一篇：為什么我不能更改變數的值？

下一篇：通過單擊渲染具有不同狀態的組件