javascript - 如何根据反应中的另一个选择器绑定一个选择器?
问题描述
我有一个带有 2 个选择器字段的输入表单 - 国家和城市。并且城市列表必须只上传当前国家的城市。选择国家后,我在该州拥有它。但是我在过滤城市列表时遇到了问题。当我写像 filter(key => key["country"] === 1 ) 时,其中 1 是国家的 ID,它可以工作。如果比较键[“country”] === this.state.country 不起作用,我该如何使用该国的当前状态?
...
onChange = event => {
this.setState({
[event.target.name]: event.target.value
});
};
getOptionItems = (Items) => Items.map(item =>
<option key={item.id} value={item.id}>
{item.name}
</option>
)
<div className="form-group">
<label htmlFor="country">Country</label>
<select
className="custom-select"
id="country"
value={this.state.country}
name="country"
onChange={this.onChange}
>
{this.getOptionItems(countries)}
</select>
</div>
<div className="form-group">
<label htmlFor="city">City</label>
<select
className="custom-select"
id="city"
value={this.state.city}
name="city"
onChange={this.onChange}
>
{Object.values(cities).filter(key => key["country"] === **what condition to write here?**).map(city =>
<option key={city.id} value={city.id}>
{city.name}
</option>
)}
解决方案
对我有帮助的是将parseInt置于条件中,因为 this.state.country 被保存为“1”、“2”、“3”。这就是问题所在。
推荐阅读
- python - 在 pyqt 函数 QIcon 中返回 ":/filename" 的路径
- flutter - 运行 pub get 时出现 Flutter 提供程序安装错误
- python - 是否有允许 PyQt5 打开两个填满整个屏幕的窗口的功能?
- .net-core - Azure AD 保护 API - GetAccessTokenForUserAsync 不包括声明角色
- mongodb - 将 Jenssegers MongoDB 与 Slim 和 Capsule 一起使用
- python - 根据转置数据创建新列
- javascript - 键具有点字符时的对象解构
- python - Pygame:单击某些按钮时,计时器会下降
- python - 有没有办法通过将字段字符串与值数组匹配来在 mongo 中查找记录
- wpf - 与单选按钮组选择相关的元素可见性导致组冻结