W języku macierzystym React, jak obsługiwać pole wyboru w widoku listy?

Question

W mojej aplikacji natywnej pod kątem reakcji próbuję wyświetlać dane kontaktowe aplikacji, zaznaczając pola wyboru. tutaj jest mój kod:

<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> 
}/> 

moim zdaniem wyboru jest wyświetlanie na każdym rzędzie, ale nie działa.

Każdy może mi pomóc. Dzięki za to.

Answer 1

Można to łatwo zrobić z oddzielaniem komponentów. Proszę spojrzeć tutaj:

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> 
     ); 
    } 
} 

Po tym można po prostu zadzwonić:

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

w swoim JSX i voila.

Ważna uwaga: nie należy używać funkcji tablicowych w blokach kodu jsx.

Ważna uwaga 2: Spróbuj zacząć używać redux lub topnika do przechowywania stanu aplikacji. Zapewni o wiele lepszy projekt kodu.

Mam nadzieję, że to pomoże.