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

您使用相同的州属性来存储两个选择器的值，您可以将它们保存在不同的属性中，例如 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>

如何防止两个本土选择器相互影响？

1 个答案: