реагировать на флажки семантического пользовательского интерфейса, как переключить один элемент? - PullRequest
Новая
       12

реагировать на флажки семантического пользовательского интерфейса, как переключить один элемент?

0 голосов
/ 11 апреля 2019

Я сопоставляю массив и для каждого элемента добавляю флажок.Флажок имеет атрибут «флажок» и в зависимости от состояния переключает его.Но когда я нажимаю один флажок, он переключает все флажки.Как включить один флажок? 

let respondent = data.map((item, idx) => {
  const { personalData, status_id } = item

  return (
    <div key={idx} className="respondents-list_item">

      <Checkbox
        onClick={() => this.addCheckedToArray(status_id)}
        checked={isChecked}
      />

      <div className="respondents-line">
        <div>
          {personalData.name}
        </div>
      </div>

    </div>
  )
})

addCheckedToArray(id) {
    const { arrayOfStatusId } = this.state

    this.setState({
      isChecked: !this.state.isChecked
    })

    if (arrayOfStatusId.includes(id)) {
      let index = arrayOfStatusId.indexOf(id)

      arrayOfStatusId.splice(index, 1)
    } else {
      arrayOfStatusId.push(id)
    }
  }

1 Ответ

0 голосов
/ 11 апреля 2019

Похоже, вы немного запутались в состоянии, вы должны отслеживать в своем состоянии список проверенных элементов и обновлять массив не только значением isChecked, в вашем случае все элементы будут переключаться вместе, потому что они ищутТо же свойство для переключения 

      let respondent = data.map((item, idx) => {
  const { personalData, status_id } = item
  return (
    <div key={idx} className="respondents-list_item">
      <Checkbox
        onClick={() => this.addCheckedToArray(status_id)}
        checked={this.isChecked(status_id)}
      />
      <div className="respondents-line">
        <div>
          {personalData.name}
        </div>
      </div>
    </div>
  )
})


isChecked = (id) =>{
  return this.state.arrayOfStatusId.includes(id)
}




addCheckedToArray(id) {
    let newState = {...this.state}
    if (newState.arrayOfStatusId.includes(id)) {
      let index = newState.arrayOfStatusId.indexOf(id)
      newState.arrayOfStatusId.splice(index, 1)
    } else {
      newState.arrayOfStatusId.push(id)
    }
    this.setState({
      ...newState
    })
  }
...