2016-06-02 3 views
0

У меня есть два сборщика в режиме реагирования. Всякий раз, когда я выбираю значение в одном сборщике, он всегда заставляет другой Picker немедленно возвращаться к первому элементу в своем списке. Кажется, он вызывает onValueChange для обоих Pickers, когда я только изменяю значение для одного Picker.Как предотвратить взаимодействие двух реагирующих друг с другом Pickers друг с другом?

сборщиков настроены так:

  <Picker 
      selectedValue={(this.state && this.state.pickerValue) || '30'} 
      onValueChange={(value) => { 
      this.setState({pickerValue: value}); 
      }} itemStyle={{color: 'white'}}> 

      <Picker.Item label={'30'} value={'30'} /> 
      <Picker.Item label={'31'} value={'31'} /> 
      <Picker.Item label={'32'} value={'32'} /> 
      <Picker.Item label={'33'} value={'33'} /> 
      <Picker.Item label={'34'} value={'34'} /> 
      <Picker.Item label={'35'} value={'35'} /> 
     </Picker> 

     <Picker 
      selectedValue={(this.state && this.state.pickerValue) } 
      onValueChange={(value) => { 
      this.setState({pickerValue: value}); 
      }} itemStyle={{color: 'white'}}> 
      <Picker.Item label={'0'} value={'0'} /> 
      <Picker.Item label={'1'} value={'1'} /> 
      <Picker.Item label={'2'} value={'2'} /> 
      <Picker.Item label={'3'} value={'3'} /> 
      <Picker.Item label={'4'} value={'4'} /> 
      <Picker.Item label={'5'} value={'5'} /> 
     </Picker> 

Есть ли способ, чтобы предотвратить два сборщиков от влияния друг на друга?

+1

Два сборщика выполняют именно то, что вы хотели, их значение связано с тем же state.pickerValue. Вы должны использовать 2 значения состояния ИЛИ абстрагировать каждый сборщик внутри отдельного компонента, который удерживает его собственное состояние. –

+0

Как мне использовать 2 состояния? – zavtra

ответ

1

Вы используете один и тот же госсобственность для хранения значения обоих сборщиков, вы можете сохранить их в различные свойства как pickerValueA и pickerValueB

Что-то вроде этого.

constructor(props){ 
    this.state = { 
     pickerValueA: '' // Your initial value here 
     pickerValueB: '' // Your initial value here 
    } 
} 

<Picker 
     selectedValue={this.state.pickerValueA} 
     onValueChange={(value) => { 
     this.setState({pickerValueA: value}); 
     }} itemStyle={{color: 'white'}}> 

     <Picker.Item label={'30'} value={'30'} /> 
     <Picker.Item label={'31'} value={'31'} /> 
     <Picker.Item label={'32'} value={'32'} /> 
     <Picker.Item label={'33'} value={'33'} /> 
     <Picker.Item label={'34'} value={'34'} /> 
     <Picker.Item label={'35'} value={'35'} /> 
</Picker> 
<Picker 
     selectedValue={this.state.pickerValueB} 
     onValueChange={(value) => { 
     this.setState({pickerValueB: value}); 
     }} itemStyle={{color: 'white'}}> 
     <Picker.Item label={'0'} value={'0'} /> 
     <Picker.Item label={'1'} value={'1'} /> 
     <Picker.Item label={'2'} value={'2'} /> 
     <Picker.Item label={'3'} value={'3'} /> 
     <Picker.Item label={'4'} value={'4'} /> 
     <Picker.Item label={'5'} value={'5'} /> 
    </Picker> 
+0

В этом '(this.state && this.state.pickerValueA)', является ли эта строка добавлением атрибутов к объекту состояния? – zavtra

+1

Вы должны настроить свое начальное состояние в своем конструкторе, я отредактировал ответ. – QoP

Смежные вопросы