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

Question

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

还有一个“提交”按钮，我需要检查项目。有人也可以帮助我

我们将不胜感激

复选框渲染代码

    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

在尝试更新options数组的状态时，您认为返回的是错误的信息。

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)