React Native中如何通过Picker组件选择省份并设置state？

嘿，我来帮你把手动输入省份改成用React Native Picker组件来实现！咱们一步步来调整你的代码：

1. 更新构造函数的State结构 #

首先，我们需要在state里添加存储Picker选中项的字段（包括显示名称和对应的ID），如果不再需要手动输入功能，可以去掉原来的searchText：

constructor(props) {
  super(props);
  // 初始化默认选中Phuket，记得要在Picker里添加对应的选项哦
  this.state = { 
    currentCity: "Phuket", 
    selectedProvinceValue: "你的Phuket对应的ID", // 替换成实际的ID值
    selectedProvinceLabel: "Phuket"
  };
  this.handleSubmit = this.handleSubmit.bind(this);
  this.handleProvinceChange = this.handleProvinceChange.bind(this); // 绑定Picker变化的处理函数
}

2. 编写Picker的选中变化处理函数 #

单独写一个函数来处理Picker选项切换的逻辑，同时保存选中项的名称和ID到state，这样代码更清晰：

handleProvinceChange(itemValue, itemIndex, itemLabel) {
  // React Native Picker的onValueChange第三个参数是选项的label（部分版本支持，若你的版本不支持，也可以自己在Picker.Item里对应好value和label关系）
  this.setState({
    selectedProvinceValue: itemValue,
    selectedProvinceLabel: itemLabel
  });
}

3. 调整Picker组件的配置 #

把Picker的selectedValue和onValueChange关联到我们刚添加的state和处理函数，同时别忘了添加默认选中的Phuket选项：

<Picker 
  selectedValue={this.state.selectedProvinceValue} 
  style={{ height: 50, width: 200 }} 
  onValueChange={this.handleProvinceChange}
>
  <Picker.Item label="Phuket" value="替换成Phuket的实际ID" />
  <Picker.Item label="Amnat Charoen" value="1906689" />
  <Picker.Item label="Ang Thong" value="1621034" />
  <Picker.Item label="Bangkok" value="1609350" />
</Picker>

4. 修改提交函数handleSubmit #

现在不再需要手动输入的searchText了，直接用Picker选中的省份名称来更新currentCity：

handleSubmit(event) {
  event.preventDefault();
  const { selectedProvinceLabel } = this.state;
  this.refs.modal3.close();
  this.setState({ currentCity: selectedProvinceLabel });
  // 如果后续需要用到省份的ID（比如调用接口），可以直接用this.state.selectedProvinceValue
  // console.log('选中的省份ID:', this.state.selectedProvinceValue);
}

5. （可选）移除手动输入的TextInput #

如果已经完全用Picker替代手动输入，就可以把原来的TextInput组件删掉，只保留Picker和提交按钮即可。

这样调整之后，用户选择Picker里的省份，点击提交按钮就能把选中的省份名称设置到currentCity的state里了～

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