如何在 React-native 中使用 Picker 设置状态？

Question

我项目中省份搜索的一个功能，但现在我正在使用输入省份的名称，现在我想在 React-native 中使用 Picker 来根据用户 selected.How 可以从中设置状态的值来设置状态用户从选择器中选择的值？

我的搜索函数和构造函数。

  constructor(props) {
    super(props);
    this.state = {
     currentCity: "Phuket",
     searchText: ""
 };
 this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event) {
 event.preventDefault();
 const { searchText } = this.state;
 this.refs.modal3.close();
 this.setState({ currentCity: searchText });
}

我的搜索框和选择器。

<TextInput
        placeholder="City name"
        ref={el => (this.element = el)}
        style={styles.textInput}
        value={this.state.searchText}
        onChangeText={searchText => this.setState({ searchText })}
      />
      <View>
        <Button style={styles.btn} onPress={this.handleSubmit}>
          <Text style={styles.submitText}>Submit</Text>
        </Button>
      </View>
      {//Dropdown Picker
      }
      <Picker
        selectedValue={this.state.language}
        style={{ height: 50, width: 200 }}
        onValueChange={(itemValue, itemIndex) =>
          this.setState({ language: itemValue })
        }
      >
        <Picker.Item label="Amnat Charoen" value="1906689" />
        <Picker.Item label="Ang Thong" value="1621034" />
        <Picker.Item label="Bangkok" value="1609350" />

Answer 1

根据您在问题中提供的代码，我认为您是 react-native 的新手。您的代码有误（您只是复制并粘贴了代码）。你的 Picker 中的这部分 selectedValue={this.state.language} 是错误的，因为你的 state 中没有 language。

假设您有一个 Picker，其中包含城市列表。并且您在状态中有一个名为 selectedCity.

的变量

所以你的选择器会像这样：

<Picker
  selectedValue={this.state.selectedCity}
  onValueChange={(itemValue, itemIndex) =>
  this.setState({ selectedCity: itemValue })
  }
 >
   <Picker.Item label="city1" value="1" />
   <Picker.Item label="city2" value="2" />
</Picker>

这将生成一个 Picker 列表 2 个城市（城市 1 - 城市 2），每当用户选择其中一个城市时， this.setState() 将被调用，状态中的 selectedCity 将被初始化。

如果你想在另一个方法中调用 setState，而不是

onValueChange={(itemValue, itemIndex) =>
      this.setState({ selectedCity: itemValue })
      }

使用

onValueChange={(itemValue, itemIndex) =>
     //call method here!
      }

如何在 React-native 中使用 Picker 设置状态？

How to setState with Picker in React-native?

javascript

picker

setstate

react-native