Динамически отображать флажки и обрабатывать события изменения: React + Typescript - PullRequest
Новая
       29

Динамически отображать флажки и обрабатывать события изменения: React + Typescript

0 голосов
/ 27 июня 2019

Я создаю динамические чекбоксы на основе массива объектов, но не могу установить обработчики изменений для них.Я использую флажки semantic-ui-реакции.Как мне обрабатывать события изменений для соответствующих флажков изменений.

Также есть кнопка отправки, мне нужно получить проверенные элементы. Может ли кто-нибудь помочь мне с этим тоже

Помощь будетпризнателен

Флажок кода визуализации 


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

1 Ответ

2 голосов
/ 27 июня 2019

Думаю, вы возвращаете не то, что пытаетесь обновить состояние массива опций.

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)
...