React / React Hooks：onChange函数改变文本同时改变所有3个元素而不是一个

Question

每当用户点击打开它时，我都有一个使用反应挂钩的组件来更改样式化折叠/手风琴面板的文本。 我遇到的问题是这个逻辑同时影响所有3个折叠面板的文本，而不仅仅是打开的面板。 我已经包含了一个代码沙箱的链接来突出显示行为，我已经包含了下面的代码

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 （ex disabledA ， disabledB ）变量。