如何防止兩個反應本地選擇器互相影響？

Question

我在本機視圖中有兩個選擇器。 每當我選擇一個選擇器中的值時，它總是使另一個選擇器立即返回其列表中的第一項。 當我僅更改一個Picker的值時，似乎正在為兩個Picker調用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

您使用相同的state屬性存儲兩個選擇器的值，可以將它們保存在不同的屬性中，例如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>