Javascript 跟踪已选中的复选框

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

我的JSON如下所示：

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

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

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>
        );
    }
}

导出默认类权限扩展组件{
构造函数（）{
超级（）；
此.state={
模式：[]，
}
}
componentDidMount（）{
this.selectedCheckboxes=新集合（）；
PermissionsApi.getAllPermissionList（）
.那么(
结果=>{
this.setState（{schemas:result}）；
控制台日志（结果）；
},
错误=>{
此.handleError（错误）；
}
)
.接住（这个.把手错误）；
}
render（）{
返回(
{this.state.schemas.map（（permissions，permissionId）=>{
返回(
{permissions.permissionName}
)
})}
单击此按钮时转换为JSON。
);
}
}

单击按钮后，不必跟踪复选框的选中状态并创建json，只需创建一个将所有选中项存储为json的状态，单击按钮后，只要随时提交选中的json即可

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

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

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>
    );
  }
}

导出类权限扩展组件{
构造函数（）{
超级（）；
此.state={
模式：[]，
选中：[]
};
}
componentDidMount（）{
this.selectedCheckboxes=新集合（）；
PermissionsApi.getAllPermissionList（）
.那么(
结果=>{
this.setState（{schemas:result}）；
},
错误=>{
此.handleError（错误）；
}
)
.接住（这个.把手错误）；
}
//这将处理复选框的复选操作
handleCheck（许可证）{
const{permissionId}=权限；
//将选中状态存储在临时变量中，以便我们可以对其进行变异
const tempchecked=this.state.checked；
//检查对象是否已存在于选中的数组中
if（this.state.checked.find（item=>item.permissionId===permissionId））{
//如果已经存在，则表示该操作未选中，因此删除
tempchecked.splice（tempchecked.indexOf（permission），1）；
}否则{
//如果不存在，则表示操作是check，因此添加
tempchecked.push（权限）；
}
console.log（tempchecked）；
//设置检查状态
this.setState（{checked:tempchecked}）；
}
render（）{
返回(
{this.state.schemas.map（（permissions，permissionId）=>{
返回(
this.handleCheck（权限）}
/>
{permissions.permissionName}
);
})}


单击此按钮时转换为JSON。
);
}
}

---

您可以使用我发布的代码的工作沙盒进行游戏，而不是跟踪复选框的选中状态并在单击按钮后创建json，您只需创建一个状态，将所有选中的项存储为json，一旦单击按钮，只要随时提交选中的json即可

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

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

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>
    );
  }
}

导出类权限扩展组件{
构造函数（）{
超级（）；
此.state={
模式：[]，
选中：[]
};
}
componentDidMount（）{
this.selectedCheckboxes=新集合（）；
PermissionsApi.getAllPermissionList（）
.那么(
结果=>{
this.setState（{schemas:result}）；
},
错误=>{
此.handleError（错误）；
}
)
.接住（这个.把手错误）；
}
//这将处理复选框的复选操作
handleCheck（许可证）{
const{permissionId}=权限；
//将选中状态存储在临时变量中，以便我们可以对其进行变异
const tempchecked=this.state.checked；
//检查对象是否已存在于选中的数组中
if（this.state.checked.find（item=>item.permissionId===permissionId））{
//如果已经存在，则表示该操作未选中，因此删除
tempchecked.splice（tempchecked.indexOf（permission），1）；
}否则{
//如果不存在，则表示操作是check，因此添加
tempchecked.push（权限）；
}
console.log（tempchecked）；
//设置检查状态
this.setState（{checked:tempchecked}）；
}
render（）{
返回(
{this.state.schemas.map（（permissions，permissionId）=>{
返回(
this.handleCheck（权限）}
/>
{permissions.permissionName}
);
})}


单击此按钮时转换为JSON。
);
}
}

---

您可以使用我发布的代码的工作沙箱进行游戏

我使用Angular，但我没有使用Reactjs的经验。但是，我认为可以将

单击事件绑定到复选框，以便在单击后可以更新模型（因为据我所知，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>
              )

返回(
{this.state.sch
  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 });
    }

  }