检查反应表中的所有复选框

Question

大家好，我是新手，我想了解如何在这个小应用程序中添加“全部切换”。

主要任务

给定一个 json 值，我必须在表格的复选框中显示该值。在我想实现“检查所有”功能后，这有助于我检查所有复选框。

问题

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

代码

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;

我已经看过这些帖子了：

1. Stackoverflow
2. Second stackoverflow link

Json 信息

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

Answer 1

您可以mapjson 数组中的所有对象及其items 数组中的所有项目，并创建value 设置为true 的数组和对象的副本。

示例

function getJson() {
  return [
    {
      id: "123",
      items: [
        { id: "231", label: "first", value: false },
        { id: "4321", label: "second", value: true },
        { id: "1337", label: "third", value: false }
      ]
    }
  ];
}

class TableComponent extends React.Component {
  state = {
    checked: false,
    rows: [],
    json: getJson()
  };

  checkboxHandler() {}

  checkAll = () => {
    this.setState(prevState => {
      const json = prevState.json.map(obj => ({
        ...obj,
        items: obj.items.map(item => ({
          ...item,
          value: true
        }))
      }));

      return { json };
    });
  };

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

ReactDOM.render(<TableComponent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>