Question

我有一个选择器，我现在正在iOS上测试两个选项。每次我从第一个选项向下拖动到第二个选项时，选择器会立即返回第一个选项。

这就是我的选择器代码的样子。

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

我希望选择器保持新滚动的选项。我还删除了|| 'a'属性的selectedValue部分，但这也没有解决问题。

Answer 1

在值更改时，您需要指定状态的哪个属性已更改，并使用 this.setState

进行相应更改

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

完整代码

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

Answer 2

我刚刚遇到这个问题并面临同样的问题，滚动到达新项目并重置为第一个项目。我已经使用无状态组件 (Hooks) 做到了这一点：

我有一个对象数组作为值和选项作为键

const data = useState({
"options":[{
"name":"Dish 1","price":0},{"name":"Dish 2","price":0}]})

const [selected, setSelected] = useState(0)

选择器组件：

<PickerIOS
    selectedValue={selected_choice}
    onValueChange={(value, index) => {
            set_selected_choice(index)
          }}
        >
          {data?.map((item, index) => (
            <PickerIOS.Item
              key={item}
              value={index}
              label={item.name}
            />
          ))}
</PickerIOS>

在这里，我存储了处于选中状态的数组元素的索引，并从 PickerIOS Item 更新了它，将 value 保持为 index。

Answer 3

我用这个“黑客”：

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>
    );
  }

如何让react-native Picker保持新选择的选项？

3 个答案: