प्रतिक्रिया-मूल में, सूचीदृश्य में चेकबॉक्स को कैसे संभालें?

Question

मेरे प्रतिक्रिया-मूल ऐप में, मैं चुनने के लिए चेकबॉक्स के साथ अपने ऐप संपर्क विवरण दिखाने की कोशिश कर रहा हूं।

<ListView 
    dataSource={this.state.dataSource} 
    renderRow={(rowData,sectionID,rowID) => 
    <TouchableHighlight onPress={() => this.goRideDetails(rowData)}> 
     <Text style={styles.rideHeader}>{rowData.name} </Text> 
     <CheckBox checked={this.state.checked} onCheckBoxPressed={()=>this.setState({checked:!this.state.checked})}/> 
    </TouchableHighlight> 
}/> 

मेरे विचार चेकबॉक्स में हर पंक्ति पर प्रदर्शित कर रहा है, लेकिन काम नहीं कर रहा: यहाँ मेरी कोड है।

कोई भी मेरी मदद कर सकता है। पहले से धन्यवाद।

Answer 1

आप घटक पृथक्करण के साथ आसानी से ऐसा कर सकते हैं। उसके बाद

export default class ContactList extends Component { 

    static propTypes = { 
     contacts: React.PropTypes.array, 
    } 

    static defaultProps = { 
     contacts: [], 
    } 

    constructor(){ 
     super(); 
     this._renderRow = this._renderRow.bind(this); 
    } 

    _renderRow(rowData,sectionID,rowID) { 
     return <Contact info={ rowData } />; 
    } 

    render() { 
     return (
      <ListView 
       dataSource={ this.props.contacts } 
       renderRow={ this._renderRow } 
      /> 
     ); 
    } 
} 

export class ContactList extends Component { 
    static propTypes = { 
     info: React.PropTypes.object.isRequired, 
    } 

    constructor(){ 
     super(); 
     this.goRideDetails = this.goRideDetails.bind(this); 
     this.setChecked = this.setChecked.bind(this); 
    } 

    goRideDetails() { 
     //your logic here 
    } 

    setChecked() { 
     this.props.info.checked = !this.props.info.checked; //will be much better to do it with redux and action creators 
    } 

    render() { 
     return (
      <TouchableHighlight onPress={ this.goRideDetails }> 
       <Text style={ styles.rideHeader }>{this.props.info.name} </Text> 
       <CheckBox checked={ this.props.info.checked } onCheckBoxPressed={ this.setChecked } /> 
      </TouchableHighlight> 
     ); 
    } 
} 

आप बस फोन कर सकते हैं:

<ContactList contacts={this.state.dataSource} /> 

अपने jsx और देखा में

कृपया, एक नज़र यहाँ ले लो।

महत्वपूर्ण नोट: अपने जेएसएक्स कोड ब्लॉक के अंदर सरणी कार्यों का उपयोग न करें।

महत्वपूर्ण नोट 2: अपने आवेदन की स्थिति को संग्रहीत करने के लिए रेडक्स या प्रवाह का उपयोग शुरू करने का प्रयास करें। यह बहुत बेहतर कोड डिजाइन प्रदान करेगा।

आशा है, इससे मदद मिलेगी।