Question

我有一个从JSON get查询填充的复选框列表。我需要跟踪所有已选中的复选框。此外，在单击“提交”按钮后，我需要将选中的复选框转换为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。

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

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

{{1}}

您可以在我发布的HERE

代码的有效沙箱中进行浏览。

Answer 2

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

类似的东西：

    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)中，您可以将选定的权限/实体添加到“选定的”数组中（请注意，如果要取消选中此复选框，则必须从此处删除条目）。
或者，您还可以扩展权限模型，使其具有“选择的”其他属性，该属性在单击复选框时将设置为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

跟踪已选中哪个CheckBox

3 个答案: