reactjs - 一次只打开一个部分的逻辑

Question

我正在努力提出实施方案。

这就像一个可折叠的。我有一个具有本地 useState 的卡片组件。只有一个单选按钮应该处于活动状态，但现在它们都可以处于活动状态。

我知道使用本地状态，每张卡都会有自己的状态，因此它们都可以同时处于活动状态。

在这种情况下，我需要某种统一状态或类似的东西来处理选择。但我该怎么做呢？

这是我的卡片组件：

import * as S from './styled'
import Radio from '@material-ui/core/Radio'

export default function PackageCard({ packageInformations }) {
  const [selectedValue, setSelectedValue] = React.useState(false)

  const handleChange = () => {
    setSelectedValue(!selectedValue)
  }

  return (
    <>
      <S.FormSectionContainer>
        <S.PackageContainer>
          <S.PackageSelectionContainer>
            <S.PackageNameAndPrice>
              <S.PackageName>{packageInformations.packageName}</S.PackageName>
              <S.PackagePrice>{packageInformations.packagePrice}</S.PackagePrice>
            </S.PackageNameAndPrice>
            <Radio checked={selectedValue} onChange={handleChange} value={selectedValue} name="package" />
          </S.PackageSelectionContainer>

          {selectedValue && (
            <S.PackageInformationContainer>
              <S.PackageDescription>{packageInformations.description}</S.PackageDescription>
            </S.PackageInformationContainer>
          )}
        </S.PackageContainer>
      </S.FormSectionContainer>
    </>
  )
}

在我的页面中，我只是：

 {packages.map(packageInfo => (
   <PackageCard packageInformations={packageInfo}/>
 ))}

这就是我所拥有的：

标签： reactjsreact-redux

Answer 1

将状态置于更高层怎么样？

const PackageCardsList = () => {
  const [checkedIndex, setCheckedIndex] = useState();

  return (
    <>
      {packages.map((packageInfo, index) => (
        <PackageCard
          checked={checkedIndex === index}
          packageInformations={packageInfo}
          onCheck={() => setCheckedIndex(index)}
        />
      ))}
    <>
  );
};

然后在组件中处理这两个新的道具PackageCard。

如果你的卡有一个 ID 会更好，这样你就可以存储那些而不是索引。并且不要忘记渲染数组组件的关键道具。