JSX / React:从另一个组件更改复选框的状态

时间:2020-03-23 16:29:54

标签: javascript reactjs checkbox react-props

我目前正在构建一堆组件以显示名片视图(最近的示例如下:https://n43z9w3o0.codesandbox.io/)。

但是,将有一个复选框而不是右上角的图像。我有3个组件用于执行此操作:

  1. newpop before operation = [[0, 3, 0, 3, 2, 0, 3, 3, 1, 1, 1, 1, 2, 0, 2, 0, 2, 3, 1, 1], [1, 3, 2, 3, 1, 1, 2, 0, 1, 3, 3, 1, 2, 2, 3, 2, 2, 2, 0, 2]] newpop after operation = [[0, 3, 0, 3, 2, 0, 3, 3, 1, 1, 1, 1, 1, 1, 2, 0, 0, 3, 1, 1], [1, 3, 2, 3, 1, 1, 2, 0, 1, 3, 3, 1, 2, 2, 3, 2, 2, 2, 0, 2], [0, 3, 0, 3, 2, 0, 3, 3, 1, 1, 1, 1, 1, 1, 2, 0, 0, 3, 1, 1], [2, 0, 0, 1, 0, 1, 2, 2, 1, 0, 0, 2, 2, 0, 3, 3, 2, 0, 0, 0], [2, 0, 0, 1, 0, 1, 2, 2, 1, 0, 0, 2, 2, 0, 3, 3, 2, 0, 0, 0], [0, 3, 0, 3, 2, 0, 3, 3, 1, 1, 1, 1, 1, 1, 2, 0, 0, 3, 1, 1]] ,这是一个功能组件,已将名称和描述映射到每个卡。
  2. card.tsx,这是一个类组件,它允许用户通过上方的工具栏与卡片互动(删除卡片,选中所有复选框等)。
  3. toolbar.tsx是一个类组件,我认为它需要具有允许工具栏操作更改名片视图状态(再次:删除,复选框)的所有功能

我该怎么做?例如,我需要从cardview.tsx函数中选择所有复选框,但是该函数在selectAll文件中。复选框组件位于toolbar文件中,并且该组件寻找card属性。但是该道具的值在isChecked组件中进行了更新,因此我不能简单地将toolbar中道具的值放入。我如何获得正确的值?

我对进行此操作的最佳方式感到困惑……裁判?上下文?任何指导将不胜感激。谢谢!

0 个答案:

没有答案