Question

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

通过查看沙盒中的代码，尝试将T处理程序更改为：

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

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

2 个答案: