Как установить состояние с помощью Picker в React-native?
Функция в моем проекте в поиске провинции, но теперь я использую ввод названия провинции, и теперь я хочу использовать Picker в React-native для setState из значения, выбранного пользователем. Как я могу установитьState из значения, которое пользователь выбрал из 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-native. Я не знаю, как его правильно использовать. Можете ли вы предложить мне, пожалуйста. И если я хочу закрыть форму выбора, когда пользователь выбрал, как я могу использовать handleSubmit в сборщике?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
из кода, который вы указали в своем вопросе, я думаю, что вы новичок в реагировании. ваш код неверен (вы просто скопировали и вставили код). эта часть 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 городов (город1 - город2), и всякий раз, когда пользователь выбирает один из них, будет вызываться this.setState(), а selectedCity в состоянии будет инициализирован.
если вы хотите вызвать setState другим методом, только вместо
onValueChange = {(itemValue, itemIndex) =>
this.setState({ selectedCity: itemValue })
}
использовать
onValueChange = {(itemValue, itemIndex) =>
//call method here!
}
Вы казаться уже делаете это
onValueChange = {(itemValue, itemIndex) => this.setState({ language: itemValue }) }и либоreactjs, либоreact-nativeне используйте оба тега.