时间戳

首页 > 解决方案 > React - 两个按钮 - 单击其中一个会同时打开

reactjs - React - 两个按钮 - 单击其中一个会同时打开

问题描述

我有一个带有 onClick 处理程序及其状态的 React 按钮组件 - 说明它是否在单击时打开。如果我在包装容器中呈现两个这样的组件，然后单击其中一个，两个按钮都会更新状态。我应该如何处理状态，以便只有一个按钮更新而不使用 id？

import React, {useState} from 'react';

const Button = (props) => {
   const [open, setOpen] = useState(false);
   const text = open ? 'Open' : 'Closed';
   const toggleButton = () => { setOpen(!open) };
   
   return (
     <button onClick={toggleButton}>{text}</button>
   )
}

// parent component
import React from 'react';
import Button from './Button'

const ButtonsWrapper = () => {
    return (
        <div>
            <Button />
            <Button />
        </div>
    )
}

我还尝试反转逻辑并将状态放入包装器组件中，然后将 onClick 处理程序作为道具传递给按钮，但位置是相同的。单击其中一个时，它们都会同时更改状态。

我正在使用 React Hooks。

标签： reactjsreact-hooks

解决方案

我的理解是，您是说当您单击一个按钮时，两个按钮的状态似乎都已更新，但您只希望单击的按钮更新其状态。（即，如果您单击按钮 A，则只有该按钮将显示“打开”作为其文本，按钮 B 将继续显示关闭）

如果以上是正确的，那么您的代码应该已经做了正确的事情。如果没有，那么您可能在其他地方有一个会导致这种情况的错误。

但是，如果您想单击一个按钮并且两者都应该切换状态，那么您可以通过跟踪父组件中的状态来实现这一点：

import React, {useState} from 'react';

const Button = (props) => {
   const text = props.isOpen ? 'Open' : 'Closed';

   const handleClick = () => {
     // do some stuff you want each button to do individually
     .....

     props.onClick()
   }
   
   return (
     <button onClick={handleClick}>{text}</button>
   )
}

// parent component
import React from 'react';
import Button from './Button'

const ButtonsWrapper = () => {
    const [buttonState, setButtonState] = useState(false)
    return (
        <div>
            <Button onClick={() => setButtonState(!buttonState)} isOpen={buttonState} />
            <Button onClick={() => setButtonState(!buttonState)} isOpen={buttonState} />
        </div>
    )
}

推荐阅读