跟踪已选中哪个CheckBox

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。

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

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

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

您可以在我这里发布的代码的有效沙盒中进行操作

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

  }

在这里查看演示