ReactJS : 상태에서 동적 체크 박스

Question

나는 동적 인 요소의 컬렉션을 가지고 있으므로 컬렉션의 내용이 무엇인지 미리 알지 못합니다. 이 체크 박스를 동적으로 렌더링하고, 기본적으로 모든 확인란을 선택합니다. 렌더링에서 다른 맵 기능을 트리거하는 상자를 선택 취소 할 수 있어야합니다. (그래서 기본적으로 내 필터입니다)

나는 상태 설정에 어려움을 겪고 있습니다. 내가 API 호출에 의해 ComponentWillMount시 초기 상태 (Initial)을 설정하려면 다음, 생각하고 있었는데 :

scenario 1 (arrays): 

this.state { 
    checkboxes: [value1, value2, value3], 
    checkedcheckboxes: [value1, value2] 
} 

가 그럼 난 checkcheckboxes 상태를 변경하려면 react.addons.update 기능을 사용할 수 있습니다. 단점은 내 체크 박스를 렌더링하는 동안 모든 체크 박스에서 checkOckOptions와 함께 checkcheckboxes 배열을 반복하여 검사해야하는지 확인해야한다는 것입니다.

scenario 2 (object): 

this.state { 
    checkboxes: { 
     value1: true, 
     value2: true, 
     value3: false 
} 

내 setState를 계산 필드를 사용할 필요가 있기 때문에 더 어렵게, (내 생각) 일을 할 수 있습니다 내가 동적 키가이 방법. 나는 이것이 내 공연에 부정적인 영향을 미칠 수 있다는 인상 아래에도 있었다.

이 패턴에 대한 모범 사례가 있습니까?

감사합니다.

Answer 1

아마 당신의 상태를 체크 박스를 나타내는 객체들의 배열과 당신의 필터를 나타내는 문자열을 포함하도록 설정할 수 있습니다. 각 체크 박스 객체는 두 개의 속성, 레이블 텍스트 및 체크 상자 값을 포함합니다.

초기 상태에서는이 배열을 비워 두는 것이 좋습니다. componentDidMount주기 동안 API 호출을 수행하고받은 정보를 포함하도록 상태를 설정합니다.

constructor(props) { 
    super(props); 

    this.state = { 
     checkboxes: [], 
     filter: 'ALL' 
    }; 

    //each checkbox would take the form of {label: 'some label', checked: true} 
} 

componentDidMount() { 
    getData(response => { //some API call 
     this.setState({ 
      checkboxes: response.body 
     }); 
    }); 
} 

구성 요소가 이러한 체크 박스를 렌더링하려면 사용자 상태의 체크 박스 객체가 실제 DOM 요소와 관련되는 방식을 이해해야합니다. 이를 수행하기 위해 .map을 활용하는 도우미 함수를 생성 할 수 있습니다. .filter을 사용하여 주 내 각 개체에 필터를 적용하고 필터와 일치하지 않는 개체를 제거 할 수도 있습니다.

function renderCheckboxes() { 
    const {checkboxes, filter} = this.state; 

    return checkboxes 
     .filter(checkbox => 
      filter === 'ALL' || 
      filter === 'CHECKED' && checkbox.checked || 
      filter === 'UNCHECKED' && !checkbox.checked 
     ) 
     .map((checkbox, index) => 
      <div> 
       <label> 
        <input 
         type="checkbox" 
         checked={checkbox.checked} 
         onChange={toggleCheckbox.bind(this, index)} 
        /> 
        {checkbox.label} 
       </label> 
      </div> 
     ); 
} 

각 체크 박스에는 onChange 속성이 일부 기능에 매핑되어 있습니다. Controlled Component을 만들므로 checked 속성을 사용하여 렌더링하는 모든 체크 박스에이 값을 제공해야하며 각 구성 요소가 검사되는지 여부를 상태가 제어합니다.귀하의 toggleCheckbox 기능은 다음과 같이 보일 수 있습니다 :

function toggleCheckbox(index) { 
    const {checkboxes} = this.state; 

    checkboxes[index].checked = !checkboxes[index].checked; 

    this.setState({ 
     checkboxes 
    }); 
} 

또한 다른 문자열로 필터를 설정하는 기능을 만드는 데 유용 할 수 있습니다 : 마지막으로

function updateFilter(filter) { 
    this.setState({ 
     filter 
    }); 
} 

, 당신은 이러한 기능을 사용할 수 있습니다 당신의 render은 확인란을 표시하고 필터 상태를 업데이트하는 링크를 표시합니다 (각 필터 링크를 구분하기 위해 몇 가지 공백을 추가했습니다).

render() { 
    return (
     <div> 
      {renderCheckboxes.call(this)} 
      <div> 
       <h4>Filters ({this.state.filter})</h4> 
       <a href="#" onClick={updateFilter.bind(this, 'ALL')}>ALL</a> 
       &nbsp;|&nbsp; 
       <a href="#" onClick={updateFilter.bind(this, 'CHECKED')}>CHECKED</a> 
       &nbsp;|&nbsp; 
       <a href="#" onClick={updateFilter.bind(this, 'UNCHECKED')}>UNCHECKED</a> 
      </div> 
     </div> 
    ); 
} 

다음은이 작업의 예 - 마이너스 API 호출 :

https://jsbin.com/bageyudaqe/edit?js,output

희망이 도움이!