Question

在这里与初学者联系。
我有一个我想在我的应用程序中重复使用的react按钮组件。

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

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>

Answer 1

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

您可以查看示例here。

通常，您总是需要将数据保留在父组件内部，并在子组件内部进行验证，每个按钮都必须可以访问该数据。

Answer 2

您需要将按下按钮的索引存储在父容器中，并在功能单击中对其进行更新。你可以试试这个

const Button = (props) => {


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

// Parent container
const [buttonPress, setbuttonPress] = useState(null);

const click = index => {
   setbuttonPress(index) 
 }


const buttonList = ['Dog', 'Cat', 'Horse'].map((item, index) => <Button click={click(index)} isPress={buttonPress == index ? '1' : '0'}>{item}</Button>)

Answer 3

我设法自己解决了它，并且按预期工作。
我用过：useEffect，useCallback，useRef。

https://codesandbox.io/s/buttons-fc6xq?file=/src/index.js

反应可重复使用的按钮

3 个答案: