React Native：单方法触发多视图元素及WheelPicker联动问题解决

这问题我碰到过好几次了，其实核心就是给每个选择器加个「身份标识」，让同一个方法能区分要更新哪个状态就行，不用写重复的方法。下面是具体的实现方式：

1. 修改选择器的回调方法 #

把原来的两个onPickerSelect和onPickerSelect2合并成一个方法，让它接受两个参数：选中的索引index，以及要更新的状态字段名stateKey。这样方法就能根据这个字段名来更新对应的状态：

onPickerSelect = (index, stateKey) => {
  this.setState({
    [stateKey]: index
  });
};

这里用了计算属性名（[stateKey]），能动态指定要更新的state属性，这是实现逻辑复用的关键。

2. 给每个WheelPicker绑定对应的标识 #

在渲染两个WheelPicker的时候，调用同一个onPickerSelect方法，但分别传入对应的状态字段名（'selectedItem'和'selectedItem2'）作为第二个参数。比如你的渲染代码可以写成这样：

render() {
  return (
    <div>
      <WheelPicker
        selectedIndex={this.state.selectedItem}
        items={this.state.itemList}
        onSelect={(index) => this.onPickerSelect(index, 'selectedItem')}
      />
      <WheelPicker
        selectedIndex={this.state.selectedItem2}
        items={this.state.itemList}
        onSelect={(index) => this.onPickerSelect(index, 'selectedItem2')}
      />
    </div>
  );
}

3. 保持原有的state结构不变 #

你的构造函数不用改，还是保留两个独立的状态字段，这样两个选择器的选中状态就会各自独立，不会互相影响：

constructor(props) {
  super(props);
  this.state = {
    selectedItem: 19,
    selectedItem2: 19,
    itemList: numberList
  };
}

为什么这样能解决问题？ #

原来的问题是两个选择器可能共用了同一个状态字段，或者回调方法只更新了一个状态，导致修改一个影响另一个。现在每个选择器对应自己的state字段，通过传递stateKey告诉回调方法要更新哪个字段，既复用了逻辑，又保证了两个选择器状态独立。

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