时间戳

首页 > 解决方案 > 动态创建复选框并为其添加更改处理程序：Semantic-ui-react + React

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

问题描述

我正在尝试使用语义 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>
))}

标签： reactjssemantic-ui-react

解决方案

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

我已经在代码沙箱上编辑了你的代码

推荐阅读