我的项目中有省份搜索的功能,但现在我正在输入省份名称,现在我想使用 React-native 中的 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" />
最佳答案
根据您在问题中提供的代码,我认为您是 react 原生的新手。您的代码是错误的(您刚刚复制并粘贴了代码)。这部分selectedValue={this.state.language}
在你的Picker
是错误的,因为没有 language
在你的state
。
假设您有一个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
in 状态将被初始化。
如果您想调用setState
在另一种方法中,只是代替
onValueChange={(itemValue, itemIndex) =>
this.setState({ selectedCity: itemValue })
}
使用
onValueChange={(itemValue, itemIndex) =>
//call method here!
}
关于javascript - 如何在 React-native 中使用 Picker 设置状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55075042/