我有一个组件，使用反应钩子来更改样式折叠/手风琴面板的文本，每当用户单击打开它时。我遇到的问题是这个逻辑同时影响所有 3 个折叠面板的文本，而不仅仅是打开的面板。我已经包含了一个代码沙箱的链接来突出显示该行为，并且我已经包含了下面的代码
Code Sandbox
https://codesandbox.io/s/q-56761334-style-collapse-extra-bdcbz 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);
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);
both collapse have same state that why they are changing at same u need to give each one a state like this!
或者你可以创建一个像这样的自定义组件：
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);
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
