如何从reactjs中select标记(main)的onchange事件更新另一个select标记(sub)

Question

这是我的代码，其中功能条件需要在的反应方式上更改

handleChange(event) {
if (value == 'fra'){
city will append
<option>Paris</option>
<option>Marseille</option>
}else{
city will append
<option>Quezon</option>
<option>Caloocan</option>
}
}

Country :<select id="country" name="source" onChange={this.handleChange}>
<option value="fra">France</option>
<option value="phi">Philippines</option> 
</select>
City :   <select id="city" name="status"></select>

Answer 1

您可以根据所选国家/地区更新状态，如下所示：

handleChange(value ) {
if (value == 'fra'){
this.setState({data: ['Paris','Marseille']});
}else{
this.setState({data: ['Quezon','Caloocan']});
}
}

然后在城市组件

<select>{props.data.map((x) => <option key={x}>{x}</option>)}</select>;

Answer 2

类似这样的东西：

const citiesFromCountry = {
'france': [
{
value: 'paris',
displayName: 'Paris'
},
{
value: 'marseille',
displayName: 'Marseille'
}
],
'philippines': [
{
value: 'quezon',
displayName : 'Quezon'
},
{
value: 'caloocan',
displayName: 'Caloocan'
}
]
}
const App = () => {
const [country, setCountry] = React.useState('France')
const [city, setCity] = React.useState('paris')
const [cities, setCities] = React.useState(citiesFromCountry['france'])
const handleChangeCountry = (event) => {
setCountry(event.target.value)
setCities(citiesFromCountry[event.target.value])
setCity(citiesFromCountry[event.target.value][0].value)
}
const handleChangeCity = (event) => {
setCity(event.target.value)
}
return (
<React.Fragment>
<select onChange={handleChangeCountry} value={country}>
<option value="france">France</option>
<option value="philippines">Philippines</option>
</select>
<select onChange={handleChangeCity}>
{cities.map(city => (
<option value={city.value}>{city.displayName}</option>
))}
</select>
</React.Fragment>
)
}

ReactDOM.render(<App/>, document.getElementById('root'))

代码笔在此