动态渲染复选框和处理变化事件：React+Typescript

Question

我正在创建基于对象数组的动态复选框，但我无法为相同的对象设置更改处理程序。我正在使用 semantic-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)

动态渲染复选框和处理变化事件：React+Typescript

Dynamically render checkboxes and handle change events: React+Typescript

javascript

typescript

ecmascript-6

reactjs

semantic-ui-react

复选框渲染代码

更改处理程序