React Native WheelPicker如何仅在选中项前添加$符号

看起来你是想只在WheelPicker的选中项前添加$符号，但目前所有选项都被加上了$对吧？问题根源在于你可能给整个选项列表的所有元素统一添加了$，没有区分选中状态和非选中状态。我们只需要在渲染选项时，根据当前项是否为选中项来决定是否添加$即可。

核心修改思路 #

在遍历生成WheelPicker的选项列表时，对比当前项的索引（或值）与你state中存储的选中状态，仅对选中项添加$符号。

具体代码修改 #

根据你提供的代码片段，你的ttSelectedItem存储的是选中项的索引，所以可以这样修改WheelPicker的渲染代码：

<WheelPicker
  data={this.state.itemList.map((item, index) => {
    // 仅当当前项索引等于选中索引时，添加$符号
    return index === this.state.ttSelectedItem ? `$${item}` : item;
  })}
  selectedIndex={this.state.ttSelectedItem}
  onValueChange={(index) => this.onPickerSelect(index, 'ttSelectedItem')}
/>

补充说明 #

1. 如果你的ttSelectedItem存储的是选中项的值而非索引（比如初始值20是numberList中的某个元素），可以调整判断逻辑为：

<WheelPicker
  data={this.state.itemList.map(item => {
    return item === this.state.ttSelectedItem ? `$${item}` : item;
  })}
  selectedIndex={this.state.itemList.indexOf(this.state.ttSelectedItem)}
  onValueChange={(index) => {
    // 更新state为选中项的值
    this.setState({ ttSelectedItem: this.state.itemList[index] });
  }}
/>

2. 另外注意，你onAddItem方法中直接修改this.state.itemList的写法是错误的，React中必须通过setState来更新状态，正确写法如下：

onAddItem = () => {
  const name = 'XYZ';
  if (!this.state.itemList.includes(name)) {
    this.setState(prevState => ({
      itemList: [...prevState.itemList, name]
    }));
  }
}

内容的提问来源于stack exchange，提问作者OzgurXE