动态渲染复选框并处理更改事件：React+Typescript

Question

我正在创建基于对象数组的动态复选框，但我无法为其设置更改处理程序。我正在使用语义-ui-react 复选框。如何处理相应更改复选框的更改事件。

还有一个提交按钮，我需要获取已检查的项目。有人也可以帮我解决这个问题

我们将不胜感激

复选框渲染代码

    let arr = [  {key: "Pending", text: "Pending", checked: false}
         {key: "Approved", text: "Approved", checked: false}
         {key: "Cancelled", text: "Cancelled", checked: false}
    ];

    this.state ={ optionsArr: [] }

    {this.state.arr.map((item: any, i: number) => (
                      <div className="menu-item" key={i}>
                        <Checkbox
                          name={item.text}
                          onChange={this.handleItemClick}
                          checked={item.checked}
                          label={item.text}
                        />
                      </div>
      ))}

更改处理程序

     handleItemClick = (event: React.FormEvent<HTMLInputElement>, data: any) => {
        const i = this.state.optionsArr.findIndex(
          (item: any) => item.text === data.name
        );
        const optionsArr = this.state.optionsArr.map((prevState: any, si: any) =>
          si === i ? !prevState : prevState
        );
        this.setState({ optionsArr });
      };

Answer 1

认为您在尝试更新选项数组的状态时返回了错误的内容。

prevState 是一个对象，就像{key: 'string', text: 'string', checked: boolean}，所以!prevState 没有意义。 试试：

     handleItemClick = (event: React.FormEvent<HTMLInputElement>, data: any) => {
        const i = this.state.optionsArr.findIndex(
          (item: any) => item.text === data.name
        );
        const optionsArr = this.state.optionsArr.map((prevState: any, si: any) =>
          si === i ? {...prevState, checked: !prevstate.checked} : prevState
        );
        this.setState({ optionsArr });
      };

您可以使用过滤器获取选中的项目：

this.state.optionsArr.filter((item: any) => item.checked)