React - две кнопки - нажатие на одну из них открывает обе

У меня есть компонент кнопки React с обработчиком onClick и его состоянием, указывающим, был ли он открыт при нажатии. Если я визуализирую два таких компонента в контейнере-оболочке и нажимаю на один из них, обе кнопки обновляют состояние. Как мне обрабатывать состояние, чтобы обновлялась только одна из кнопок без использования идентификаторов?

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.


reactjs react-hooks
person bakrall    schedule 11.02.2021    source источник
comment
Можете ли вы воспроизвести для нас вашу проблему на codeandbox?   -  person Gandzal    schedule 11.02.2021
comment
Дай мне немного времени, пожалуйста.   -  person bakrall    schedule 11.02.2021
comment
Я не вижу ничего плохого в этом коде. Согласитесь, что скрипка или еще что-то было бы хорошо.   -  person squillman    schedule 11.02.2021
comment
Я проверил еще раз, и этот код работает - codepen.io/bakrall/pen/WNooMbR - вы Правильно. Большое спасибо за помощь!   -  person bakrall    schedule 11.02.2021

Ответы (1)


arrow_upward
0
arrow_downward

Насколько я понимаю, вы говорите, что, когда вы нажимаете одну кнопку, кажется, что состояние обеих кнопок обновляется, но вы хотите, чтобы только нажата кнопка обновляла свое состояние. (т.е. если вы нажмете кнопку 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>
    )
}
person dh_vie    schedule 11.02.2021
comment
Ваше первое понимание правильное - я хочу щелкнуть по одному, и только он должен обновлять состояние. Вы же говорите, что это должно сработать. - person bakrall; 11.02.2021
comment
Большое спасибо за помощь. - person bakrall; 11.02.2021