动态创建复选框并为其添加更改处理程序：Semantic-ui-react + React

Question

我正在尝试使用语义-ui-react 创建动态复选框我有以下结构的对象。我希望复选框值应用于此数组中的特定对象。我无法使用下面提供的更改处理程序来完成此操作。有人可以帮我解决这个问题吗？

沙盒：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

通过查看沙箱中的代码，尝试将您的 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)}

Answer 2

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

上编辑了您的代码

动态创建复选框并为其添加更改处理程序：Semantic-ui-react + React

Dynamically create checkboxes and add change handlers for the same : Semantic-ui-react + React

reactjs

semantic-ui-react