通过单击顶部单元格选择所有复选框

问题描述

在三个文件中编写代码。在 setList() 中需要传递一个对象数组来分配，但是它们是使用 map 生成的。正确的做法是什么？一般来说，我试图将我的代码调整为 https://codesandbox.io/s/react-select-all-checkbox-jbub2 但在那里复选框的数组被移动到一个单独的文件中，而我的则是使用 map 生成的。 https://codesandbox.io/s/sweet-butterfly-0s4ff?file=/src/TableBody/TableBody.jsx

1 个文件)

//@version=4
study("Pivot Points Standard",shorttitle="Pivots Std",overlay=true)
higherTF = input("D",type=input.resolution)
prevCloseHTF = security(syminfo.tickerid,higherTF,close[1],lookahead=true)
prevOpenHTF = security(syminfo.tickerid,open[1],lookahead=true)
prevHighHTF = security(syminfo.tickerid,high[1],lookahead=true)
prevLowHTF = security(syminfo.tickerid,low[1],lookahead=true)
pLevel = (prevHighHTF + prevLowHTF + prevCloseHTF) / 3
r1Level = pLevel * 2 - prevLowHTF
s1Level = pLevel * 2 - prevHighHTF
var line r1Line = na
var line pLine = na
var line s1Line = na
if pLevel[1] != pLevel
    line.set_x2(r1Line,bar_index)
    line.set_x2(pLine,bar_index)
    line.set_x2(s1Line,bar_index)
    line.set_extend(r1Line,extend.none)
    line.set_extend(pLine,extend.none)
    line.set_extend(s1Line,extend.none)
    r1Line := line.new(bar_index,r1Level,bar_index,extend=extend.right)
    pLine := line.new(bar_index,pLevel,width=3,extend=extend.right)
    s1Line := line.new(bar_index,s1Level,extend=extend.right)
    label.new(bar_index,"R1",style=label.style_none)
    label.new(bar_index,"P","S1",style=label.style_none)
if not na(pLine) and line.get_x2(pLine) != bar_index
    line.set_x2(r1Line,bar_index)

2-文件)

 let CheckBox = () => {
      
        return (
            <div>
                <label className={s.checkBox}>
                    <input className={s.checkBox__input} type="checkBox"/>
                        <span className={s.checkBox__fake}></span>
                </label>
            </div>
        )
    }

3-文件)

 const Tablehead = (handleSelectAll,isCheckAll ) => {
        return (
            <thead className = {s.header}>
            <tr className = {s.area}>
              <th ><CheckBox name="selectAll" id="selectAll" handleClick={handleSelectAll}  isChecked={isCheckAll}/>
</th>            
            </tr>   
          </thead>
        )
    }

解决方法

所以这里有几个问题

1. 组件 Checkbox 不带任何道具
2. const Tablehead = (handleSelectAll,isCheckAll) 应该是 const Tablehead = ({ handleSelectAll,isCheckAll })

最重要的是您的 TableHead 和 TableBody 组件都需要此复选框信息，因此您需要将状态从 TableBody 提升到 Table 组件.

此外，您所遵循的示例代码似乎做了很多多余的事情，这些事情对于实现您的功能来说是不必要的。只需在您的每个 checked 中存储一个 droplets 属性就足够了，并且有两个函数可以切换单个和切换全部。

所以我在您的代码沙盒链接中进行了上述更改。

这是Link