Динамически создавать флажки и добавлять обработчики изменений для одного и того же: Semantic-ui-реагировать + React

Question

Я пытаюсь создать динамические флажки, используя semantic-ui-реакции. У меня есть объект следующей структуры.Я хочу, чтобы значение флажка применялось к конкретному объекту в этом массиве.Я не могу сделать это с помощью обработчика изменений, представленного ниже.Может ли кто-нибудь помочь мне с этим?

Песочница: https://codesandbox.io/s/suspicious-pine-r5dpi

import { Checkbox } from "semantic-ui-react";

checkboxArray = [
                  {name: "firstName", value: "firstName", show: true, displayValue: " First Name"},
                  {name: "status", value: "status", show: true, displayValue: " Status "},
                  {name: "visits", value: "visits", show: true, displayValue: " Visits "}
];

Checkbox Change Handler
--------------------------
 handleItemClick = (e,data) => {
    console.log(data.checked);
    this.setState({ [data.name]: data.checked });
  };

Inside Render
----------------
{this.state.optionsArr.map((item, i) => (
            <div key={i}>
              <Checkbox
                name={item.name}
                onChange={this.handleItemClick}
                checked={item.show}
                label={item.displayValue}
              />
            </div>
))}

Answer 1

semantic-ui-react принимает функцию для onChange(event, data: object). event является синтетическим событием по умолчанию от React, а data несет все на подпорках. Я думаю, что ваш checked находится на data объекте. попробуйте data.checked вместо event.target.checked

handleItemClick = (event, data, i) => {
    const { optionsArray } = this.state;
    optionsArray[i].show = !optionsArray[i].show;
    this.setState(() => {
      return optionsArray;
    });
  };

  render() {
    console.log(this.state.optionsArray);
    return (
      <div>
        {this.state.optionsArray.map((item, i) => (
          <div key={i}>
            <Form.Checkbox
              name={item.name}
              onChange={(e, v) => this.handleItemClick(e, v, i)}
              value={item.show}
              defaultChecked={item.show}
              label={item.displayValue}
            />
          </div>
        ))}
      </div>
    );
  }

Я отредактировал твой код на codesandbox

Answer 2

Посмотрев на код в песочнице, попробуйте изменить ваш обработчик handleItemClick на:

handleItemClick = name => event => {
    let object,
      newOptionsArray = [...this.state.optionsArray];

    for (var i = 0; i < newOptionsArray.length; i++) {
      if (newOptionsArray[i].name === name) {
        object = newOptionsArray[i];
      }
    }

    object.show = event.target.checked;

    this.setState({
      ...this.state.optionsArray,
      object
    });
  };

И попробуйте изменить способ вызова обработчика в событии onChange, например:

onChange={this.handleItemClick(item.name)}