반응에서 여러 확인란 처리

우리가 좋아하는 음식에 대한 입력을 원하고 페이지에 표시하고 싶다고 가정해 보겠습니다.

먼저 두 개의 변수를 준비해야 합니다. 하나는 음식 목록용이고 다른 하나는 기본적으로 비어 있는 선택된 음식 목록용입니다.

this.state = {
  foods: [
    {
      id: 1,
      name: '🍕'
    },
    {
      id: 2,
      name: '🍙'
    },
    {
      id: 3,
      name: '🍰'
    },
  ],
  selected: [],
}

이제 양식을 만들고 selected 상태를 표시합니다.

<form>
  <p>
    { JSON.stringify(this.state.selected) }
  </p>
  <p>Foods</p>
  {
    this.state.foods.map(item => {
      return (
        <label key={ item.id }>
          <input type="checkbox"></input>
          <span>{ item.name }</span>
        </label>
      )
    })
  }
</form>

체크박스 입력을 위해 selected 및 일반onChange 속성을 추가해야 합니다.

<input type="checkbox"
  onChange={ () => this.onChange(item.id) }
  selected={ this.state.selected.includes(item.id) }
  ></input>

selected 속성은 입력이 '사전 선택'(선택)되어야 하는지 여부를 지정하는 부울 값을 허용합니다. 그리고 onChange 속성은 입력이 선택 및 선택 취소될 때마다 트리거됩니다.

따라서 이 동작 때문에 onChange 속성에 함수를 추가해야 합니다.

onChange(id) {
  let selected = this.state.selected
  let find = selected.indexOf(id)

  if(find > -1) {
    selected.splice(find, 1)
  } else {
    selected.push(id)
  }

  this.setState({ selected })
}

find는 체크된 항목이 selected 배열에 있는지 여부를 확인하는 변수입니다. find > -1은 선택한 변수에 항목이 존재하고 확인되어 선택된 목록에서 제거하려는 것을 의미하고 find == -1은 그 반대를 의미합니다. 선택한 배열에 항목이 없으므로 배열에 추가하려고 합니다.

이제 다음과 같아야 합니다.

ID 너머

전체 개체(id뿐만 아니라)를 유지하려면 인덱스를 찾는 방법을 변경하고 선택한 배열에 항목을 푸시할 수 있습니다.

onChange(id) {
  let selected = this.state.selected
  // instead of using indexOf, we can use findIndex to look through array of objects
  let find = selected.findIndex(item => item.id === id)

  if(find > -1) {
    selected.splice(find, 1)
  } else {
    // We can use find to get the item based on its id
    selected.push(this.state.foods.find(item => item.id === id))
  }

  this.setState({ selected })
}

이제 다음과 같아야 합니다.

정렬

마지막으로 기본적으로 선택한 배열에는 특정 순서가 없으므로 순서를 유지하려면 setState 를 사용하기 전에 정렬 방법을 추가할 수 있습니다.

// sort by id in ascending order
selected.sort((a, b) => a.id - b.id)