I have two select boxes, one for country and another for region. When someone selects a country, I need to populate the region select with different values (asynchronously).
I'm aware of react-country-region-selector and react-select, but those solutions seem like overkill for such a simple task.
In the code below, the regions are populated correctly after selecting a country, but the value of the country select is lost. Also, should I be setting state in the constructor or should Formik be handling all state?
import React from 'react';
import { Formik, Form, Field } from "formik";
class App extends React.Component {
constructor(props) {
super(props);
console.log(`props: ${JSON.stringify(props, null, 2)}`)
this.state = {
regions: []
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleCountryChanged = this.handleCountryChanged.bind(this);
this.getRegions = this.getRegions.bind(this);
}
handleSubmit(values, { setSubmitting }) {
console.log(JSON.stringify(values), null, 2);
};
handleCountryChanged(event) {
const country = event.target.value;
this.getRegions(country).then(regions => {
this.setState({ regions: regions });
console.log(`regions: ${JSON.stringify(regions, null, 2)}`);
});
}
getRegions(country) {
// Simulate async call
return new Promise((resolve, reject) => {
switch (country) {
case "United States":
resolve([
{ value: 'Washington', label: 'Washington' },
{ value: 'California', label: 'California' }
]);
break;
case "Canada":
resolve([
{ value: "Alberta", label: "Alberta" },
{ value: "NovaScotia", label: "Nova Scotia" }
]);
break;
default:
resolve([]);
}
});
}
render() {
return (
<Formik
initialValues={{ country: "None", region: "None", regions: [] }}
onSubmit={this.handleSubmit}
>
{({ isSubmitting }) => (
<Form>
<label htmlFor="country">Country</label>
<Field id="country" name="country" as="select"
onChange={this.handleCountryChanged}>
<option value="None">Select country</option>
<option value="United States">United States</option>
<option value="Canada">Canada</option>
</Field>
<label htmlFor="region">Region</label>
<Field id="region" name="region" as="select">
<option value="None">Select region</option>
{this.state.regions.map(r => (<option key={r.value} value={r.value}>{r.label}</option>))}
</Field>
<button type="submit" disabled={isSubmitting}>Submit</button>
</Form>
)}
</Formik>);
}
}
export default App;```
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…