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

IT技术 javascript reactjs onchange react-hooks
2021-05-20 18:29:06

我有一个组件使用 react hook 来更改样式折叠/手风琴面板的文本，每当用户单击打开它。我遇到的问题是此逻辑同时影响所有 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);
2个回答

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);

这是因为您disabled在所有元素中使用相同的变量。每个元素都需要单独的disabled(ex disabledA, disabledB) 变量。

其它你可能感兴趣的问题
上一篇如何修复对等依赖安装问题 下一篇控制选择框内选定值的外观：有没有办法单独呈现选定的项目？