두 개의 네이티브 피커가 서로 영향을 미치지 않도록하는 방법은 무엇입니까?

Question

나는 반응 네이티브 뷰에 두 개의 피커를 가지고 있습니다. 한 피커에서 값을 선택할 때마다 항상 다른 피커가 즉시 목록의 첫 번째 항목으로 되돌아갑니다. 하나의 Picker에 대한 값만 변경하면 두 Pickers에 대해 onValueChange가 호출 된 것 같습니다.

피커는 다음과 같이 설정됩니다 :

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

서로 영향을 미치는 두 선택기를 방지하기 위해 어떤 방법이 있나요? 당신은 두 선택기의 값을 저장하기 위해 같은 상태 속성을 사용하는

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