反应如何通过单击更改我的组件答案

【问题标题】：React how can i change my component with click反应如何通过单击更改我的组件
【发布时间】：2021-07-13 10:53:36
【问题描述】：

我有一个组件 ( Card )，它在右上角有一个图标。当我单击该图标时，我想将其更改为另一个组件（ EditCard ）进行编辑。 Card 组件附带了我的数据映射。当我设置状态以改变它时：

const [editVisible, seteditVisible] = useState(false);
.
.
.
{datax &&
          datax.map((x) => {
            return (
              <div key={x._id}>
                {editVisible === false && (
                  <div>
                    <div className="flex">
                      <Link
                        className="hover:text-current w-full "
                        to={{
                          pathname: `${APP_PREFIX_PATH}/collections/${x._id}`,
                        }}
                      >
                        <Card data={x} />
                        <br />
                      </Link>
                      <span
                        className="ti-pencil-alt  relative right-8 top-2 text-lg"
                        onClick={() => {
                          seteditVisible(true);
                        }}
                      ></span>
                    </div>
                  </div>
                )}
                {editVisible === true && (
                  <div>
                    <div className="flex">
                      <div className="w-full">
                       <EditCard data={x} />
                      </div>
                    </div>
                  </div>
                )}
              </div>
            );
          })}

是的，它的工作和不断变化的组件，但它改变了我所有的卡片。我只想更改我单击的内容。我怎样才能做到？为了让它更清晰截图：

我的卡片：https://prnt.sc/1artutf

当我点击右上角的图标时（仅限卡片图标之一）：https://prnt.sc/1arv7f7

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

您可以通过 x._id 代替 onClick 中的 seteditVisible(true)。

onClick={() => seteditVisible(x._id)}

在你的渲染中你可以

{datax && datax.map((x) => {
            return (
              <div key={x._id}>
                {editVisible === x._id && (
                  <div>
                    <div className="flex">
                    ...
                    ...
                    ...
                 )}
                 {editVisible !== x._id && (
                  <div>
                  ...
                  ...
                  </div>
                  )}
)}
)};

您可以更简单地使用三元块。


{editVisible === x._id ? (
     <>
     JSX
     </>
   ) : (
     <>
     JSX
     </>
)}

【讨论】：

【解决方案2】：

我认为您想创建另一个状态，例如 const [flipStatus, setFlipStatus] = useState([dataX.map((element) => false)}]) 来为数组中的每个元素保存一个值，并拥有一个像这样的 handleClick 函数

const handleClick = (index) => {
        const newflipStatus = [...flipStatus]
        newflipStatus[index] = !flipStatus[index]
        setFlipStatus(newflipStatus);
    }

并在地图函数FlipStatus[index] === true && ... 上显示翻转状态我认为这可能是一种开始思考解决方案的方式，也可以看看这个answer

【讨论】：