我有一個複選框列表，我如何得到它們的狀態

如果我在React Native中有一個列表，並且每個列表項都有一個複選框，我怎樣才能得到所有這些複選框的狀態？我有一個複選框列表，我如何得到它們的狀態

現在，我使用這個

{ 
    this.props.data.allLogs.map((r) => { 
    return (
     <ListItem 
     key={r.id} 
     title={r.logDate} 
     onPress={() => this.toggle(r.id)} 
     subtitle={ 
      <CheckBox 
      title={`start: ${r.startedAtOdometerReading} -> end: ${r.endedAtOdometerReading}`} 
      checked={this.state.checkboxes[r.id]} 
      onPress={() => this.toggle(r.id)} 
      onIconPress={() => this.toggle(r.id)} 
      /> 
     } 
     /> 
    ); 
    }) 
} 




toggle(id) { 
    let checkboxes = this.state.checkboxes; 
    checkboxes[id] = !this.state.checkboxes[id]; 
    this.setState({checkboxes}); 
    }

和它的作品（複選框打開和關閉沒有問題），但是當我退出this.state.checkboxes我得到一個空數組...

來源

2017-09-25 JoshJoe

很難給出太多指導，不會對您設置的詳細信息，但你可能需要用戶註銷時組件將卸載和狀態都將丟失 –

我猜你得到一個空數組的原因是因爲列表被卸載，並且其狀態被清除。

來源

2017-09-25 23:25:02

名單ISN的檢查框的狀態存儲在組件的外面，否則無法卸載 – JoshJoe

首先，確保你不會直接改變狀態，因爲這是在反應的壞習慣，你應該改變你的toggle功能，這

toggle(id) { 
    this.setState({checkboxes: {...this.state.checkboxes, [id]: !this.state.checkboxes[id]}}); 
}

現在回答你的問題 - 很難說沒有代碼的其餘部分，但你可以重構它這樣

class CheckboxesList extends React.Component { 

    //... 

    renderListElements =() => { 
     const { checkboxes } = this.state 
     this.props.data.allLogs.map((r) => { 
      return (
       <CheckboxListItem 
        key={r.id} 
        toggle={this.toggle} 
        checked={checkboxes[r.id]} 
        r={r} /> 
      ); 
     }) 
    } 

    toggle = (id, checked) => { 
     this.setState({ checkboxes: { ...this.state.checkboxes, [id]: checked } }) 
    } 
}

和您的列表項

class CheckboxListItem extends React.Component { 

    //... 

    state = { 
     checked: false 
    } 

    componentDidMount() { 
     const { checked } = this.props 
     this.setState({ checked }) 
    } 

    onToggle =() => { 
     const { r } = this.props 
     const newChecked = !this.state.checked 
     this.setState({ checked: newChecked },() => { 
      this.props.toggle(r.id, newChecked) 
     }) 
    } 

    render() { 
     const { r } = this.props 
     const { checked } = this.state 
     return (
      <ListItem 
       title={r.logDate} 
       onPress={this.onToggle} 
       subtitle={ 
        <CheckBox 
         title={`start: ${r.startedAtOdometerReading} -> end: ${r.endedAtOdometerReading}`} 
         checked={checked} 
         onPress={this.onToggle} 
         onIconPress={this.onToggle} 
        /> 
       } 
      /> 
     ) 
    } 
}

請確保您還重構複選框使用checked道具在其狀態並使其得到更新時checked改變

來源

2017-09-26 00:14:51

謝謝。我將發佈我最終使用的解決方案。我不知道爲什麼國家沒有堅持下去，也許你的答案會解決它，但我沒有嘗試。 – JoshJoe

我改一個字符串數組，這一切現在的作品。此解決方案也可以更好地工作，因爲我可以設置一個按鈕來「檢查」列表中的所有項目，或者只需將所有ID添加到數組中，或者全部刪除它們，將它們全部「刪除」。

{ 
    this.props.data.allLogs.map((r) => (
     <ListItem 
     key={r.id} 
     title={`${getReadableDate(r.logDate, true)}`} 
     subtitle={ 
      <CheckBox 
      title={`start: ${r.startedAtOdometerReading} -> end: ${r.endedAtOdometerReading}`} 
      checked={this.state.checkboxes && this.state.checkboxes.includes(r.id)} 
      onPress={() => this.toggle(r.id)} 
      onIconPress={() => this.toggle(r.id)} 
      /> 
     } 
     /> 
)) 
} 

    toggle(id) { 
    let checkboxes = this.state.checkboxes; 
    if(checkboxes && checkboxes.includes(id)){ 
     const index = checkboxes.indexOf(id); 
     checkboxes.splice(index, 1); 
    } else { 
     checkboxes = checkboxes.concat(id); 
    } 
    this.setState({checkboxes}); 

    }

來源

2017-09-26 03:59:34 JoshJoe

我有一個複選框列表，我如何得到它們的狀態

回答

相關問題