Следите за тем, какой CheckBox был проверен

Question

У меня есть список флажков, заполненных запросом JSON get.Мне нужно отслеживать все флажки, которые были проверены.Более того, мне нужно преобразовать отмеченные флажки в формат JSON после нажатия кнопки «Отправить».

Мой JSON выглядит примерно так:

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

У меня есть флажки, которые содержат различные разрешения с разрешением nameкак ярлык.Мне нужно отслеживать все отмеченные флажки.

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

Я использую 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 2

Вы можете использовать другой объект состояния для отображения проверенного состояния разрешений.

Вот как вы добавляете это состояние

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

  }

проверить демо здесь

Answer 3

Вместо отслеживания состояния флажков и создания 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>
    );
  }
}

Вы можете поиграть с рабочей песочницей того кода, который я выложил ЗДЕСЬ