reactjs - 反应可重用按钮

Question

在这里反应初学者。
我有一个反应按钮组件，我想在我的应用程序中重用它。

这是我的可重用按钮组件：

const Button = (props) => {
  const [buttonPress, setbuttonPress] = useState('0');

  const click = () => {
    buttonPress !== '1' ? setbuttonPress('1') : setbuttonPress('0');
  }

  return (
    <Button className={buttonPress == '1' ? 'active' : ''} onClick={click}>
      {props.children}
    </Button>
  )
};

单击时，它会向组件添加一个“活动”类。
我不知道的是，一旦我单击另一个按钮，如何删除前一个“活动”按钮的类。

<Button>Dog</Button>
<Button>Cat</Button>
<Button>Horse</Button>

标签： reactjs

Answer 1

我误解了你的问题，但我想我能够弄清楚。

您可以在此处查看示例。

一般来说，您总是需要将数据保存在父组件中并在子组件中进行验证，每个按钮都必须可以访问数据。