跟踪已选中的 CheckBox

Question

我有一个从 JSON 获取查询中填充的复选框列表。我需要跟踪所有已选中的复选框。 此外，我需要在单击提交按钮后将选中的复选框转换为 JSON 格式。

我的 JSON 看起来像这样：

[
{
  permissionName: "permission1",
  permissionId: "1",
},
{
  permissionName: "permission2",
  permissionId: "2",
}
]

我有包含各种权限的复选框，其中权限名称为标签。我需要跟踪所有选中的复选框。

export default class Permissions extends Component{
    constructor(){
        super();

        this.state = {
            schemas: [],
        }
    }
    componentDidMount() {
        this.selectedCheckboxes = new Set();
        PermissionsApi.getAllPermissionList()
            .then(
            result => {

                this.setState({ schemas: result});
                console.log(result);
            },
            error => {
                this.handleError(error);
            }
            )
            .catch(this.handleError);
    }

    render(){
        return (
            <div className="App">
              {this.state.schemas.map((permissions, permissionId) => {
                  return(
                      <div>
                        <input type="checkbox" name="{permissions.permissionName}" value="{permissions.permissionId}"/>
                            <label>
                                {permissions.permissionName}
                            </label>
                      </div>
                  )
              })}
              <button>Convert Into JSON when this button is clicked.</button>
            </div>
        );
    }
}

Answer 1

您可以在单击按钮后创建一个将所有选中项存储为 json 的状态，而不是跟踪复选框的选中状态并创建 json，一旦单击按钮，只需随时提交选中的 json。

当用户取消选中该框时，您只需从选中的数组中删除该对象。

这是代码，请阅读代码中的 cmets 进行解释

export class Permissions extends Component {
  constructor() {
    super();

    this.state = {
      schemas: [],
      checked: []
    };
  }
  componentDidMount() {
    this.selectedCheckboxes = new Set();
    PermissionsApi.getAllPermissionList()
      .then(
        result => {
          this.setState({ schemas: result });
        },
        error => {
          this.handleError(error);
        }
      )
      .catch(this.handleError);
  }

  //this will handle the check action to your checkboxes
  handleCheck(permission) {
    const { permissionId } = permission;

    //store your checked state in a temporary variable so we can mutate it
    const tempchecked = this.state.checked;

    //check if the object already exist in the checked array
    if (this.state.checked.find(item => item.permissionId === permissionId)) {
      //if already exist, it means the action is uncheck, thus remove
      tempchecked.splice(tempchecked.indexOf(permission), 1);
    } else {
      //if didnt exist, it means the action is check, thus add
      tempchecked.push(permission);
    }

    console.log(tempchecked);

    //set checked state
    this.setState({ checked: tempchecked });
  }

  render() {
    return (
      <div className="App">
        {this.state.schemas.map((permissions, permissionId) => {
          return (
            <div>
              <input
                type="checkbox"
                name="{permissions.permissionName}"
                value="{permissions.permissionId}"
                onChange={() => this.handleCheck(permissions)}
              />
              <label>{permissions.permissionName}</label>
            </div>
          );
        })}

        <br />
        <button>Convert Into JSON when this button is clicked.</button>
      </div>
    );
  }
}

您可以使用我在HERE 发布的代码的工作沙盒来进行操作

Answer 2

我使用 Angular，但我没有使用 Reactjs 的经验。但是我认为可以将click 事件绑定到复选框，这样您就可以在单击它后更新模型（据我所知，React 是单向绑定而不是双向绑定）。

类似：

    return (
        <div className="App">
          {this.state.schemas.map((permissions, permissionId) => {
              return(
                  <div>
                    <input type="checkbox" name="{permissions.permissionName}" value="{permissions.permissionId}" (click)="setChecked(permissionId)"/>
                        <label>
                            {permissions.permissionName}
                        </label>
                  </div>
              )

在您的方法setChecked(permissionId) 中，您可以将选定的权限/实体添加到“选定”数组中（请注意，如果随后取消选中复选框，则必须从那里删除条目）。
或者，您可以使用另一个属性“selected”扩展您的权限模型，该属性在单击复选框时设置为 true。

无论您选择哪种方法，当点击提交按钮时，您都可以遍历您的数组（如果是 1. 方法）或 selected = true 权限（如果是 2. 方法）。

很抱歉，我无法为您提供正确的 Reactjs 语法，但我希望这些建议能够引导您朝着正确的方向前进。

Answer 3

您可以使用另一个状态对象来维护权限的检查状态。

这是添加该状态的方法

this.state = {
      schemas: [],
      checkedPermissions: []
    }

这是你如何保持这种状态

  CheckPermissions(permissionID) {
    const isChecked = this.state.checkedPermissions.some(a => a === permissionID);
    if (isChecked) {
      this.setState({ checkedPermissions: this.state.checkedPermissions.filter(a => a !== permissionID) })
    } else {
      const data = this.state.checkedPermissions;
      data.push(permissionID);
      this.setState({ checkedPermissions: data });
    }

  }

查看演示here