Json 选中反应表中的所有复选框

大家好，我是一个新的反应，我想知道我如何才能添加一个“切换所有”在这个小应用程序

主要任务

给定一个json值，我必须在表的复选框中显示该值。在我想要实现一个“全部检查”功能之后，它帮助我检查所有的复选框

问题

我不知道如何覆盖给定的json值

代码

---

您可以

映射
json
数组中的所有对象及其
项
数组中的所有项，并创建
值设置为
真
的数组和对象的副本

示例


函数getJson（）{
返回[
{
身份证号码：“123”，
项目：[
{id:“231”，标签：“first”，值：false}，
{id:“4321”，标签：“second”，值：true}，
{id:“1337”，标签：“third”，值：false}
]
}
];
}
类TableComponent扩展了React.Component{
状态={
勾选：假，
行：[]，
json:getJson（）
};
checkboxHandler（）{}
checkAll=（）=>{
this.setState（prevState=>{
const json=prevState.json.map（obj=>({
…obj，
items:obj.items.map（item=>({
…项目，
值：true
}))
}));
返回{json}；
});
};
render（）{
返回(
{this.state.json.map（（obj，i）=>{
返回(
{obj.items.map（（数据，j）=>{
返回(
{data.label}

);
})}
);
})}
全部检查
);
}
}
render（，document.getElementById（“根”））

如果我再问一个问题，我很抱歉，但我不确定是否值得打开另一个话题。但是，如果我想选中\uncheck？@Legeo，您可以使用状态中的
checked
属性将所有
值设置为
true
/
false
，并在
checkAll
中切换
选中的
值。或者，您可以首先检查任何
值是否为
false
，然后将它们全部设置为
true
，否则设置为
false
。如果你想不明白，你可以提出一个新问题。我宁愿在再次发言之前花些时间去了解它。真的非常感谢你所做的一切！
import React from 'react';
import {getJson} from './getJson';

class TableComponent extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        checked: false,
        rows:[],
        json: []
      }
    }

    componentDidMount() {
      this.setState((prevState) => {
        return {
          json: getJson(),
        }
      })
    }

    checkboxHandler() {

      }

    render() {
      return (
        <div>
          <table>
            <tbody>
              {this.state.json.map((obj, i) => {
                return (
                  <tr key={obj.id}>
                    {obj.items.map((data, i) => {
                        return( 
                            <td key={data.id}> 
                                <p>{data.label}</p>
                                    <input 
                                        type="checkbox" 
                                        checked={data.value}
                                        onChange={this.checkboxHandler} 
                                    />
                            </td>
                        )
                    })}
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      )
    }
  }

  export default TableComponent;

[{
            "id": "123",
            "items": [
              { "id": "231", label: "first", value: false },
              { "id": "4321", label: "second", value: true },
            ]
              }
          ];