React / React Hooks: функция onChange для изменения текста меняется одновременно для всех 3 элементов вместо одного

Question

У меня есть компонент, использующий крюк реагирования для изменения текста стилизованной панели свертывания / аккордеона, когда пользователь щелкает ее, чтобы открыть. Проблема, с которой я столкнулся, заключается в том, что эта логика воздействует на текст одновременно для всех трех панелей свертывания, а не только на открываемую панель. Я включил ссылку на изолированную программную среду кода, чтобы выделить поведение, и я включил код ниже

Code Sandbox https://codesandbox.io/s/q-56761334-style-collapse-extra-bdcbz

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Col, Row, Collapse } from "antd";
import styled from "styled-components";
import "antd/dist/antd.css";

const Flexbox = styled.div`
  font-family: sans-serif;
  flex-direction: column;
  display: flex;
  justify-content: center;
  border: solid 1px palevioletred;
  padding: 10%;
  margin: 10%;
`;

const StyledCollapse = styled(Collapse)`
  &&& {
    border: none;
    border-radius: 0px;
    background-color: #f7f7f7;
    box-shadow: none;
  }
`;

const StyledH1 = styled.h1`
  font-weight: 700;
`;

function FromValidate() {
  const [disabled, setDisabled] = useState(true);
  return (
    <Flexbox>
      <Row>
        <Col span={12}>
          <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
            <Collapse.Panel
              header="DROPDOWN EXAMPLE"
              key="1"
              showArrow={false}
              bordered={false}
              extra={<p>{disabled ? "SHOW" : "HIDE"}</p>}
            >
              <div>
                <StyledH1>Placeholder</StyledH1>
              </div>
            </Collapse.Panel>
          </StyledCollapse>
          <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
            <Collapse.Panel
              header="DROPDOWN EXAMPLE"
              key="1"
              showArrow={false}
              bordered={false}
              extra={<p>{disabled ? "SHOW" : "HIDE"}</p>}
            >
              <div>
                <StyledH1>Placeholder</StyledH1>
              </div>
            </Collapse.Panel>
          </StyledCollapse>
        </Col>
      </Row>
    </Flexbox>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<FromValidate />, rootElement);

Answer 1

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Col, Row, Collapse } from "antd";
import styled from "styled-components";
import "antd/dist/antd.css";

const Flexbox = styled.div`
  font-family: sans-serif;
  flex-direction: column;
  display: flex;
  justify-content: center;
  border: solid 1px palevioletred;
  padding: 10%;
  margin: 10%;
`;

const StyledCollapse = styled(Collapse)`
  &&& {
    border: none;
    border-radius: 0px;
    background-color: #f7f7f7;
    box-shadow: none;
  }
`;

const StyledH1 = styled.h1`
  font-weight: 700;
`;

function FromValidate() {
  const [disabled, setDisabled] = useState(true);
  const [disabled1, setDisabled1] = useState(true);
  return (
    <Flexbox>
      <Row>
        <Col span={12}>
          <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
            <Collapse.Panel
              header="DROPDOWN EXAMPLE"
              key="1"
              showArrow={false}
              bordered={false}
              extra={<p>{disabled ? "SHOW" : "HIDE"}</p>}
            >
              <div>
                <StyledH1>Placeholder</StyledH1>
              </div>
            </Collapse.Panel>
          </StyledCollapse>
          <StyledCollapse onChange={() => setDisabled1(prev => !prev)}>
            <Collapse.Panel
              header="DROPDOWN EXAMPLE"
              key="1"
              showArrow={false}
              bordered={false}
              extra={<p>{disabled1 ? "SHOW" : "HIDE"}</p>}
            >
              <div>
                <StyledH1>Placeholder</StyledH1>
              </div>
            </Collapse.Panel>
          </StyledCollapse>
        </Col>
      </Row>
    </Flexbox>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<FromValidate />, rootElement);

оба коллапса имеют одно и то же состояние: почему они меняются одновременно, вам нужно дать каждому такое состояние!

или вы можете создать пользовательский компонент, подобный этому:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Col, Row, Collapse } from "antd";
import styled from "styled-components";
import "antd/dist/antd.css";

const Flexbox = styled.div`
  font-family: sans-serif;
  flex-direction: column;
  display: flex;
  justify-content: center;
  border: solid 1px palevioletred;
  padding: 10%;
  margin: 10%;
`;

const StyledCollapse = styled(Collapse)`
  &&& {
    border: none;
    border-radius: 0px;
    background-color: #f7f7f7;
    box-shadow: none;
  }
`;

const StyledH1 = styled.h1`
  font-weight: 700;
`;

function FromValidate() {
  return (
    <Flexbox>
      <Row>
        <Col span={12}>
          <Customcollapse header="example1" />
          <Customcollapse header="example2" />
        </Col>
      </Row>
    </Flexbox>
  );
}
const Customcollapse = props => {
  const [disabled, setDisabled] = useState(true);
  return (
    <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
      <Collapse.Panel
        header={props.header}
        key="1"
        showArrow={false}
        bordered={false}
        extra={<p>{disabled ? "SHOW" : "HIDE"}</p>}
      >
        <div>
          <StyledH1>Placeholder</StyledH1>
        </div>
      </Collapse.Panel>
    </StyledCollapse>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<FromValidate />, rootElement);

Answer 2

Это потому, что вы используете одну и ту же переменную disabled во всех элементах. вам нужна отдельная переменная disabled (например, disabledA, disabledB) для каждого элемента.