如何在React-native中使用Picker設置setState？

Question

我的省份搜索項目中的一個功能，但是現在我使用的是省份名稱，現在我想在React-native中使用Picker從用戶選擇的值中設置狀態。如何從用戶從Picker中選擇的值中設置狀態？

我的搜索功能和構造函數。

  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

從您在問題中提供的代碼，我認為您是本機反應的新手。 您的代碼有誤（您只是復制並粘貼了代碼）。 selectedValue={this.state.language} 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個城市（city1-city2），並且每當用戶選擇其中一個城市時，都會調用this.setState()並初始化selectedCity狀態。

如果要用另一種方法調用setState ，而不是

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

采用

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