5

W mojej aplikacji natywnej pod kątem reakcji próbuję wyświetlać dane kontaktowe aplikacji, zaznaczając pola wyboru. tutaj jest mój kod:W języku macierzystym React, jak obsługiwać pole wyboru w widoku listy?

<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.

+0

Czy chcesz, aby każdy wiersz miał swój własny stan pola wyboru, tak aby każde pole wierszy mogło być zaznaczone/odznaczone osobno? Co masz na myśli mówiąc "... ale nie działa" ... co robi? – rmevans9

+0

dzięki za odpowiedź, tak, chcę, dokładnie to, co powiedziałeś. Stan pola wyboru nie jest aktualizowany, a pole wyboru nie jest zaznaczone/odznaczone po jego naciśnięciu. – neelima

Odpowiedz

3

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.

+0

Cześć Alex Belets, Dziękuję za odpowiedzi, ale pole wyboru nie jest zaznaczone/niezaznaczone. Mam na myśli to, że kiedy dałem flase na początku, pole wyboru pokazane z niezaznaczonym i kiedy naciskam/klikam na nim, wartość pola wyboru zmienia się na true, ale wciąż pole wyboru pokazany z niezaznaczonym. – neelima

+0

Wprowadziłem pewne zmiany w metodzie setChecked, takie jak {this.setState ({checked:! This.state.checked}). Teraz działa dobrze. dziękuję bardzo Alex – neelima

+0

Cześć Neelima, jakie zmiany zrobiłeś, aby zaktualizować interfejs dla zaznaczenia/odznaczenia. Czy możesz mi pomóc? Naprawdę się w to wkurzę. – PK86