2016-06-02 19 views
11

Ho un raccoglitore che sto testando su iOS in questo momento con due opzioni. Ogni volta che trascino dalla prima opzione alla seconda opzione, il selettore torna immediatamente alla prima opzione.Come rendere Picker nativo reattivo rimanere all'opzione appena selezionata?

Questo è il mio codice per il mio raccoglitore.

<Picker 
     style={{ 
     width: 100, 
     }} 
     selectedValue={(this.state && this.state.pickerValue) || 'a'} 
     onValueChange={(value) => { 
     this.setState({value}); 
     }} itemStyle={{color: 'white'}}> 
     <Picker.Item label={'Hello'} value={'a'} /> 
     <Picker.Item label={'World'} value={'b'} /> 
</Picker> 

Desidero che il selettore rimanga sull'opzione appena selezionata. Ho anche rimosso la parte || 'a' dell'attributo selectedValue ma questo non ha risolto il problema.

+1

change onValueChange to this.setState ({pickerValue: value}); – Nakib

risposta

14

Sul cambio di valore è necessario specificare quale proprietà dello stato cambiato e cambiare di conseguenza con this.setState

onValueChange={(value) => {this.setState({pickerValue: value}); 

codice completo

<Picker 
     style={{ 
     width: 100, 
     }} 
     selectedValue={(this.state && this.state.pickerValue) || 'a'} 
     onValueChange={(value) => { 
     this.setState({pickerValue: value}); 
     }} itemStyle={{color: 'white'}}> 
     <Picker.Item label={'Hello'} value={'a'} /> 
     <Picker.Item label={'World'} value={'b'} /> 
</Picker> 
-1

Ho usato questo "hack":

render() { 
    const values = ['1', '2']; 

    return (
     <Picker 
     value={this.state.value} 
     onValueChange={this.onValueChange.bind(this)} 
     > 
     { 
       <Picker 
        value={this.state.value} 
        onValueChange={this.onValueChange.bind(this)} 
       > 
       { 
        [<Picker.Item 
         label="n/a" 
         value={null} 
        />].concat(values.map(value => { 
          return (
           <Picker.Item 
            label={value} 
            value={value} 
           /> 
          ) 
          }) 
        ) 
       } 
       </Picker> 
    ); 
    } 
+1

Mentre le risposte sono sempre apprezzate, questa domanda è stata fatta un ** anno ** fa e aveva già una soluzione accettata. Si prega di cercare di evitare di "far saltare" le domande in alto fornendo risposte, a meno che la domanda non sia già stata contrassegnata come risolta, oppure si sia trovata una soluzione nuova e migliorata al problema. Ricorda inoltre di fornire alcuni [** contesto attorno al tuo codice **] (https://meta.stackexchange.com/questions/114762) per aiutarti a spiegarlo. Consulta la documentazione su [** scrivendo ottime risposte **] (http://stackoverflow.com/help/how-to-answer) per alcuni suggerimenti su come rendere le tue risposte contano :) –

+1

È questo il rientro raccomandato? Sono nuovo di React-Native, sto solo chiedendo. – ratsimihah

Problemi correlati